Button group

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.

Accessibility recommendation

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 group

Use the isIconOnly prop when displaying a group of icon-only buttons.

Button group tooltips

Buttons within a button group will automatically display a default browser tooltip containing the button label text. This can be customized or unset via the title property in your options button configuration.

To instead display an EuiToolTip around your button(s), pass the toolTipContent property. You can also use toolTipProps to customize tooltip placement, title, and any other prop that EuiToolTip accepts.

Beta feature: Showing tooltips on disabled EuiButtonGroup

If you need disabled buttons to show tooltips, add the hasAriaDisabled prop to switch from native to custom disabled behavior which preserves focusability. Read more about custom disabled behavior.

Button group in forms

Pattern

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.

Props

EuiButtonGroup

Extends HTMLAttributes


Prop	Description and type	Default value
Prop legend#	Description and type A hidden group title (required for accessibility) Type: `string`	Default value Required
Prop onChange#	Description and type Single: Returns the `id` of the clicked option and the `value` Multi: Returns the `id` of the clicked option Type: `((id: string, value?: any) => void) \| ((id: string) => void)`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isDisabled#	Description and type Controls the disabled behavior via the native `disabled` attribute. Type: `boolean`	Default value `false`
Prop hasAriaDisabled#	Description and type NOTE: Beta feature, may be changed or removed in the future Changes the native `disabled` attribute to `aria-disabled` to preserve focusability. This results in a semantically disabled button without the default browser handling of the disabled state. Use e.g. when a disabled button should have a tooltip. Type: `boolean`	Default value `false`
Prop buttonSize#	Description and type Typical sizing is `s`. Medium `m` size should be reserved for major features. `compressed` is meant to be used alongside and within compressed forms. Type: `"s" \| "m" \| "compressed"`	Default value `s`
Prop isFullWidth#	Description and type Expands the whole group to the full width of the container. Each button gets equal widths no matter the content Type: `boolean`	Default value `false`
Prop isIconOnly#	Description and type Hides the label to only show the `iconType` provided by the `option` Type: `boolean`	Default value `false`
Prop color#	Description and type Any of the named color palette options. Do not use the following colors for standalone buttons directly, they exist to serve other components: accent warning Type: `"text" \| "accent" \| "accentSecondary" \| "primary" \| "success" \| "warning" \| "danger"`	Default value `text`
Prop type#	Description and type Actual type is `'single' \| 'multi'`. Determines how the selection of the group should be handled. With `'single'` only one option can be selected at a time (similar to radio group). With `'multi'` multiple options selected (similar to checkbox group). Default for `type` is single so it can also be excluded Type: `"single" \| "multi"`	Default value `single`
Prop options#	Description and type An array of EuiButtonGroupOptionProps Type: `EuiButtonGroupOptionProps[]`	Default value `[]`
Prop name#	Description and type @deprecated No longer needed. You can safely remove this prop entirely @deprecated Type: `string`	Default value
Prop idSelected#	Description and type Styles the selected option to look selected (usually with `fill`) Required by and only used in `type='single'`. Type: `string`	Default value
Prop idToSelectedMap#	Description and type A map of `id`s as keys with the selected boolean values. Required by and only used in `type='multi'`. Type: `{ [id: string]: boolean; }`	Default value `{}`