This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

ButtonGroup

Table of contents

Code examples

Example of usage:

It's possible to add a divider for buttons that don't have border:

Example of Group Button with spaced variant

Accessibility

  • If using a button that won't have text be sure to provide an aria-label

Props

NameRequiredDefaultTypeDescription
spacingspacingSSpacingTokensSets the spacing of the buttons if variant is separate.
variant
"spaced"
"collapsed"
Determines how the Button Group will display the buttons Determines how the Button Group will display the buttons
withDividerfalse
false
true
Determines if the divider should be rendered between collapsed buttons
childrenrequiredReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes