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 requirement

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.

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.

Props

EuiButtonGroup

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


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 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 isDisabled#	Description and type Type: `boolean`	Default value `false`
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. Type: `"text" \| "accent" \| "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 `{}`