Segmented button group

SegmentedButtonGroup is a component that displays a list of actionable buttons, flush with separators.

Also known as: Split Button, Button Group

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

When using segmented button group ensure you follow the button accessibility guidance.

Keyboard interactions

Key	Function
`Tab`	Tab moves focus to the segmented button group. If moving focus into a segmented button group, Tab moves focus to the first button in the group. If focus is inside a segmented button group, Tab moves focus to the next button in the group.
`Enter` / `Space`	If the button has focus, this action activates it. If the button is disabled and can receive focus, this action does nothing.
`Shift` + `Tab`	This action moves focus to outside of the segmented button group component and to the previous element in the tabbing order. If focus is inside a segmented button group, this action moves focus to the previous button within the tab order.

Best practices

When using segmented button group ensure you follow the button accessibility guidance.

Keyboard interactions

Key	Function
`Tab`	Tab moves focus to the segmented button group. If moving focus into a segmented button group, Tab moves focus to the first button in the group. If focus is inside a segmented button group, Tab moves focus to the next button in the group.
`Enter` / `Space`	If the button has focus, this action activates it. If the button is disabled and can receive focus, this action does nothing.
`Shift` + `Tab`	This action moves focus to outside of the segmented button group component and to the previous element in the tabbing order. If focus is inside a segmented button group, this action moves focus to the previous button within the tab order.

Best practices

When using segmented button group ensure you follow the button accessibility guidance.

Keyboard interactions

Key	Function
`Tab`	Tab moves focus to the segmented button group. If moving focus into a segmented button group, Tab moves focus to the first button in the group. If focus is inside a segmented button group, Tab moves focus to the next button in the group.
`Enter` / `Space`	If the button has focus, this action activates it. If the button is disabled and can receive focus, this action does nothing.
`Shift` + `Tab`	This action moves focus to outside of the segmented button group component and to the previous element in the tabbing order. If focus is inside a segmented button group, this action moves focus to the previous button within the tab order.