ButtonGroup

import { ButtonGroup } from '@enmovil/ui-design-system';

A row of buttons where one option is selected at a time, built from an options list. onChange fires when the user picks an option, and the group can be spaced out or rounded.

Properties

Property	Type	Required	Default	Allowed values	Description
options	Option[]	Yes	—	—	Array of { label, value, icon?, onChange? }. An option's own onChange fires when that option is clicked, after the group's onChange.
selected	string	Yes	—	—	The selected value
label	string	No	—	—	Text shown above the buttons, such as a field label. Nothing is shown without it.
spaced	boolean	No	false	—	Shows the options as separate buttons with a gap between them instead of joined together. Defaults to false.
gap	string | number	No	8	—	Space between the buttons: a number in pixels or any CSS length. Defaults to 8. Requires spaced.
rounded	boolean	No	false	—	Gives each button fully rounded (pill) corners. Requires spaced; joined buttons are not affected.

options

An array of objects (Option). Each object has these fields:

Field	Type	Required	Description
label	string	Yes	Text of the button. Not shown when the option has an icon.
value	string	Yes	Passed to onChange when the option is clicked and compared with selected; also the button's key, so values must be unique.
icon	React.ReactNode	No	Shown in the button instead of the label.
onChange	(value: string) => void	No	Fires when this option is clicked, after the group's onChange.

Events

Name	Signature	When it fires
onChange	(value: string) => void	Triggered when the selection changes
onOptionMouseEnter	((value: string, event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)	Fires when the pointer enters an option, with that option's value.
onOptionMouseLeave	((value: string, event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)	Fires when the pointer leaves an option, with that option's value.
onFocus	FocusEventHandler<HTMLDivElement>	Fires when any option receives focus.
onBlur	FocusEventHandler<HTMLDivElement>	Fires when an option loses focus, including when focus moves to another option.

Children

ButtonGroup does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Basic Toggle example.

Loading playground…

Storybook

Open ButtonGroup in Storybook to try every story with the full set of controls.