Button Group
A container to house two buttons that are presented side-by-side, generally at the end of a workflow.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { ButtonGroup } from '@iag/chroma-react-ui.components';
Accessibility
Accessibility Documentation(opens in new window)Default
By default, a button group is horizontal.
Stacked
Use when buttons need to be stacked and full width.
Stacked (mobile only)
Use when buttons need to be stacked and full width on mobile devices only.
Equal width
Use when buttons need to equally fill the width of their container.
Equal width (mobile only)
Use when buttons need to equally fill the width of their container on mobile only.
Prev/Next Style
Use when you require the primary call to action button to be on the right when placed horizontally, but on top when stacked on smaller devices.
This example shows how to pass in css that will change the direction and width for mobile, using Tailwindcss.