button

The button component allows users to trigger an action.

XML Element

button

Java Class

JmixButton

Basics

LIVE DEMO

A button can display text, an icon, or both. Use the title attribute to provide a tooltip.

<button id="helloButton"
        text="Say hello!"
        title="Click me!"/>
<button id="saveButton1"
        text="Save"
        icon="ARCHIVE"/>
<button id="saveButton2"
        title="Save"
        icon="ARCHIVE"/>

Button with Declarative Action

LIVE DEMO

Use the action attribute to associate a button with an existing action. The button automatically reflects the action’s text, icon, enabled and visible states, and invokes the action when clicked.

For a view action, set action to its identifier. For an action defined by another component, use the <componentId>.<actionId> format.

<actions>
    <action id="someAction"
            text="Click me!"/>
</actions>
<layout>
    <button action="someAction"/>
</layout>

Button with Programmatic Action

LIVE DEMO

You can create an action in Java and assign it to a button using the setAction() method. The action defines the button text and the operation performed when the button is clicked.

XML
<button id="buttonAction"/>
Java
@ViewComponent
protected JmixButton buttonAction;

@Autowired
protected Notifications notifications;

@Subscribe
protected void onInit(InitEvent event) {
    buttonAction.setAction(
            new BaseAction("action")
                    .withText("Click me!")
                    .withHandler(actionPerformedEvent -> notifications.show("Action performed"))
    );
}

Button with Image

LIVE DEMO

A button’s icon can be a component, such as an image. The following example loads an image and assigns it to the button using the setIcon() method.

XML
<button id="logoButton" themeNames="icon"/>
Java
private static final String LOGO_SRC_PATH = "/META-INF/resources/icons/jmix-logo.png";
@ViewComponent
private JmixButton logoButton;
@Subscribe
public void onInit(InitEvent event) {
    Image logo = new Image(DownloadHandler.forClassResource(getClass(), LOGO_SRC_PATH), "jmix-logo");
    logo.setWidth("100px");
    logoButton.setIcon(logo);
}

Theme Variants

LIVE DEMO

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

Variant Description Supported By

primary

Applies the primary button style.

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

large

Makes the button larger.

Aura, Lumo

small

Makes the button smaller.

Aura, Lumo

icon

Reduces the whitespace around the icon.

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

Attributes

The following attributes are specific to button:

Name Description Default

action

Associates the button with a view or component action. See Button with Declarative Action.

—

disableOnClick

Disables the button immediately after it is clicked to prevent repeated submissions. Use setEnabled(true) to enable it again.

false

icon

Sets the icon displayed by the button.

—

iconAfterText

Places the icon after the button text.

false

whiteSpace

Controls how whitespace and line breaks are handled in the button text.

NORMAL

The following shared attributes are supported by button:

id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - css - enabled - focusShortcut - height - maxHeight - maxWidth - minHeight - minWidth - tabIndex - text - themeNames - title - visible - width

Handlers

The following handlers are specific to button:

Name Description

clickListener

Fired when the user clicks the button. To register the handler programmatically, use the addClickListener() method.

doubleClickListener

Fired when the user clicks the button twice within a short interval.

singleClickListener

Fired after a short delay when the click is determined not to be part of a double-click.

The following shared handlers are supported by button:

AttachEvent - BlurEvent - DetachEvent - FocusEvent

Elements

A button can include icon, prefix and suffix, and tooltip components as its nested elements.

See Also