Button

EUI provides many types, colors and configurations of buttons. The one best suited for you context depends on placement, prominence, and state. For primary and secondary actions it is best to use the basic EuiButton. For tertiary or low prominence actions, use EuiButtonEmpty.

Be sure to read the full button usage guidelines.

Basic button

The most standard button component is EuiButton which comes in two styles and two sizes. The fill style should be reserved for the main action and limited in number for a single page. Use the small size (size="s") when placing buttons into smaller containers like popovers.

When using colors other than primary, be sure that either the words or an icon also represents the status. For instance, don't rely on color alone to represent dangerous actions but use words like "Delete" not "Confirm". The text and accent colors should be used sparingly as they can easily be confused with other states like disabled and danger.

Empty button

Use EuiButtonEmpty when you want to reduce the importance of the button, but still want to align it to the rest of the buttons. It is also the only button component that supports down to size xs.

Flush empty button

When aligning EuiButtonEmpty components to the left or the right, you should make sure they’re flush with the edge of their container, so that they’re horizontally aligned with the other content in the container.

Buttons with icons

All button components accept an iconType which must be an acceptable EuiIcon type. Multi-color icons like app icons will be converted to single color. Icons can be displayed on the opposite side by passing iconSide="right".

Icon buttons

An EuiButtonIcon is a button that only contains an icon (no text). Use the display and size props to match the appearance of your EuiButtonIcon to other standard buttons. By default they will appear as xs, empty buttons.

warning

EuiButtonIcon requires an aria-label to express the meaning to screen readers.

Buttons as links

Every button component accepts either an href (rendered as an <a>) or an onClick (rendered as a <button>). While they also accept both props to be applied simultaneously to support certain routing mechansims, it is not usually recommended. For more specific information on how to integrate EUI buttons with react-router, see this wiki page.

If you are creating a purely text-based link, like the one in the previous paragraph, use EuiLink instead.

Loading state

Setting the isLoading prop to true will add the loading spinner or swap the existing icon for the loading spinner and set the button to disabled. It is good practice to also rename the button to "Loading…".

Split buttons

EUI does not support split buttons specifically. Instead, we recommend using separate buttons for the main and overflow actions. You can achieve this by simply using the display and size props EuiButtonIcon to match that of the primary action button.

Toggle buttons

You can create a toggle button with any button type like the standard EuiButton, EuiButtonEmpty, or EuiButtonIcon. Use state management to handle the visual differences for on and off. Though there are two exclusive situations to consider.

If your button changes its readable text, via children or aria-label, then there is no additional accessibility concern.

If your button only changes the visual appearance, you must add aria-pressed passing a boolean for the on and off states. All EUI button types provide a helper prop for this called isSelected.

warning

Do not add aria-pressed or isSelected if you also change the readable text.

Button groups

An EuiButtonGroup is for indicating selection only. They utilize the type="single" or "multi" prop to determine whether multiple or only single selections are allowed per group.

warning

In order for groups to be properly read as groups with a title, the legend prop is required. This is only for accessibility, however, so it will be visibly hidden.

Icon only button groups

If you're just displaying a group of icons, add the prop isIconOnly.

Button groups in forms

When using button groups within compressed forms, match the form elements by adding buttonSize="compressed". Compressed groups should always be fullWidth so they line up nicely in their small container unless they are icon only.

For a more detailed example of how to integrate with forms, see the "Complex example" on the compressed forms page.