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.

Loading...

Icon only button group

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

Loading...

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.

Loading...

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.

Loading...

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 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: "primary" | "text" | "accent" | "accentSecondary" | "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 ids as keys with the selected boolean values. Required by and only used in type='multi'. Type: { [id: string]: boolean; } ↦	Default value {} ↵

𐘂𐘂