comboButton

LIVE DEMO

comboButton is a button with a drop-down list of items. comboButton can be created to provide a set of variations on an action.

This component is very similar to dropdownButton.

The main difference is that an action can be added to the root button.

XML Element

comboButton

Java Class

ComboButton

Attributes

id - action - alignSelf - classNames - colspan - css - dropdownIcon - enabled - focusShortcut - height - icon - maxHeight - maxWidth - minHeight - minWidth - openOnHover - overlayClass - tabIndex - text - themeNames - title - visible - whiteSpace - width

Handlers

AttachEvent - BlurEvent - clickListener - doubleClickListener - singleClickListener - DetachEvent - FocusEvent

Elements

actionItem - componentItem - dropdownIcon - icon - separator - textItem

Basics

An example of comboButton:

<actions>
    <action id="contact" text="Contact Us"/>
</actions>
<layout>
    <comboButton id="saveButton" action="contact">
        <items>
            <textItem id="callItem" text="Call Us"/>
            <textItem id="emailItem" text="E Mail"/>
            <textItem id="whatsAppItem" text="WhatsApp"/>
        </items>
    </comboButton>
</layout>
combo button basics

Theme Variants

Use themeNames attribute to set a component theme.

Variant Description Supported By

primary

Applies the primary button style.

Aura, Lumo

tertiary

Applies a lower-emphasis button style.

Aura, Lumo

tertiary-inline

Applies an inline button style intended for use inside text content.

Lumo

icon

Reduces the whitespace around the icon.

Lumo

small

Makes the button smaller.

Aura, Lumo

large

Makes the button larger.

Aura, Lumo

success

Applies the success style.

Aura, Lumo

warning

Applies the warning style.

Aura, Lumo

error

Applies the error style.

Aura, Lumo

contrast

Applies the contrast style.

Lumo

Attributes

Common attributes serve the same purpose for all components. The following attributes are specific to comboButton:

Name

Description

Default

dropdownIcon

Allows to set the dropdown icon for comboButton.

VaadinIcon.CHEVRON_DOWN