Elastic UI

Button

Button with Icon

The passed icon needs to come from our list of svg icons. Can be flipped to the other side by passing iconSide="right".

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…".

ButtonEmpty

EuiButtonEmpty is used when you want to make a button look like a regular link, but still want to align it to the rest of the buttons.

Flush ButtonEmpty

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.

Button Icon

Button icons are buttons that only contain an icon (no text).

Toggle buttons

This is a specialized component that combines EuiButton and EuiToggle to create a button with an on/off state. You can pass all the same parameters to it as you can to EuiButton. The main difference is that, it does not accept any children, but a label prop instead. This is for the handling of accessibility with the EuiToggle.

The EuiButtonToggle does not have any inherit visual state differences. These you must apply in your implementation.

 
 

Disabled

 

Groups

Button groups are handled similarly to the way checkbox and radio groups are handled but made to look like buttons. They group multiple EuiButtonToggles and utilize the type="single" or "multi" prop to determine whether multiple or only single selections are allowed per group.

Stylistically, all button groups are the size of small buttons, do not stretch to fill the container, and typically should only be color="text" (default) or "primary". If you're just displaying a group of icons, add the prop isIconOnly.

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

Primary & multi select

This is a primary group

Disabled & full width

This is a disabled group

Icons only

Text align
  
Text style

Compressed groups should always be fullWidth so they line up nicely in their small container.

This is a basic group

Unless they are icon only

Text style

Ghost

For buttons on dark color backgrounds, you can pass color='ghost' to any of the button styles on this page. These should be used extremely rarely, and are only for placing buttons on top of dark or image-based backgrounds. A good example of their use is in the EuiBottomBar component.