ButtonGroup

ButtonGroup joins related actions into one compound control. Use it when the actions are peers, such as view modes or adjacent approve/reject decisions.

Basic usage

Code

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

With separator

Code

<ButtonGroup>
  <Button variant="outline">Approve</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Reject</Button>
</ButtonGroup>

Vertical

Code

<ButtonGroup orientation="vertical">
  <Button variant="outline">Summary</Button>
  <ButtonGroupSeparator orientation="horizontal" />
  <Button variant="outline">Products</Button>
  <Button variant="outline">Activity</Button>
</ButtonGroup>

API

ButtonGroup

Name	Type/Description
orientation	"horizontal" | "vertical" | null | undefined

ButtonGroupSeparator

Name	Type/Description
className	string | ((state: SeparatorState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
orientation = "vertical"	Orientation | undefined The orientation of the separator.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.