Button Group
Pattern
Live
The Button Group pattern keeps related buttons visually linked and arranged across viewports.
- Usage
- Examples
- Properties
- CSS Variables
Usage
The Button Group wraps related buttons together and controls their layout across different viewports. This makes it easier to provide a consistent layouts. They can also contain any button variant.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { ButtonGroup } from "@iag/chroma-react-ui.components";
When to use
Use Button Group when you have multiple related actions to present to users. For example, when you have buttons for Submit and Cancel in a form.
When to avoid
Avoid using Button Group with unrelated or single buttons. In this case, consider the single Button component instead.
Do
- Do use the button variants that relate to the button actions (e.g. a primary or secondary call to action).
- Do define the layout of the Button Group at the different viewport sizes to effectively display the contained buttons.
- Do use tailwind to implement layouts and order across different viewports.