CheckButton
A selectable Button for multiple selection.
Design guidance
When and how to use this
Use a CheckButton to represent a selection that has an immediate effect on the state of other interface items, such as a filter menu. It also works well for lists of tags or labels.
When to consider something else
If a user should only select one of a number of options, use a RadioButton. For forms, alongside other form controls, generally a standard Checkbox is more appropriate.
React
CheckButton composes the Button component and
supports everything that Button does in addition to a selected state controlled
by the isChecked prop.
| Prop | Description |
|---|---|
isChecked | if true, the CheckButton will be checked. You'll need to pass onChange to update its value (since it is now controlled). |
isDisabled | if true, the CheckButton will be disabled. |
Group
Use a CheckButtonGroup to group a set of CheckButton components together
that represent a single piece of state. This allows you to get and set state as
an array of values and disable the entire group via isDisabled.
Color Scheme
CheckButton supports color modes when using the next theme, but sometimes a
design calls for the colorScheme to override the mode. Pass light or dark
to set the color explicitly.
Variant
By default, CheckButton uses the tertiary Button variant. It also
supports primary and ghost.
Primary
Ghost
Minimal
Pass isMinimal for the minimal style of each variant which only ever renders a
single pixel border.