Button Group

A row of connected buttons that share one border, such as a view switcher, a pager or a set of filters.

import { ButtonGroup, ButtonGroupItem } from '@orvain/react';
 
<ButtonGroup aria-label="View">
  <ButtonGroupItem>Day</ButtonGroupItem>
  <ButtonGroupItem selected>Week</ButtonGroupItem>
  <ButtonGroupItem>Month</ButtonGroupItem>
</ButtonGroup>
 
// Icon-only item: aria-label is required
<ButtonGroup aria-label="Alignment" size="xs">
  <ButtonGroupItem icon={<AlignLeftIcon />} aria-label="Align left" />
  <ButtonGroupItem icon={<AlignCenterIcon />} aria-label="Align center" selected />
</ButtonGroup>

Add a small Orvain Button Group with 4 text-only items: • “Day” • “Week”, selected • “Month” • “Year”

Orvain MCPIncluded with the library

When to use#

For two to six related options, such as Day, Week and Month.
For stepping controls: previous, a label, next.

When not to use

Use two separate Buttons for a primary and a secondary action.

Anatomy#

1Group

White, one 1px #f2f2f2 stroke and an 8px radius around every item. One to six items.

2Item

Satoshi Medium 14/20 in #6d6d6d, with a 1px divider between items. Small 36px, X-Small 32px, 2X-Small 28px.

3Icons

Optional left and right chevrons (16px, 14px at 2X-Small), or one icon on its own (18px, 16px).

States#

Default

White, secondary text.

Hover

A 4% wash.

Active

A 6% wash and Bold #2a2a2a text: the selected item.

Disabled

#f2f2f2 surface and #cbcbcb text, one item or the whole group.

Source#

Preview – final code pending

The Button Group is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

button groups