comboButton

comboButton combines an action button with a drop-down list of related actions.

XML Element

comboButton

Java Class

ComboButton

Basics

LIVE DEMO

An example of comboButton:

<actions>
    <action id="save" text="Save" icon="ARCHIVE"/>
</actions>
<layout>
    <comboButton id="saveButton" action="save">
        <items>
            <textItem id="saveDraftItem" text="Save as draft"/>
            <textItem id="saveCopyItem" text="Save as copy"/>
            <textItem id="savePublishItem" text="Save and publish"/>
        </items>
    </comboButton>
</layout>

Theme Variants

Use the themeNames attribute to apply one or more theme variants.

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

The following attributes are specific to comboButton:

Name Description Default

action

Associates an action with the component.

—

dropdownIcon

Allows to set the dropdown icon for comboButton.

VaadinIcon.CHEVRON_DOWN

icon

Sets the icon.

—

openOnHover

Controls whether the menu opens when the pointer hovers over the component.

—

overlayClass

Adds CSS class names to the component overlay.

—

The following shared attributes are supported by comboButton:

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

Handlers

The following handlers are specific to comboButton:

Name Description

clickListener

Handles clicks on the component.

doubleClickListener

Handles double-clicks on the component.

singleClickListener

Handles single clicks on the component.

The following shared handlers are supported by comboButton:

AttachEvent - BlurEvent - DetachEvent - FocusEvent

Elements

A comboButton can include actionItem, componentItem, dropdownIcon, icon, separator, and textItem as its nested elements.