Button Group
Groups related buttons into a single visual unit — joined together for
toolbars and segmented controls, or evenly spaced for action rows. It can
cascade a shared size and
variant to every button so they stay
consistent.
Attached (default)
Left Center Right
| 1 | <nana-button-group aria-label="Text alignment"> |
| 2 | <nana-button variant="secondary">Left</nana-button> |
| 3 | <nana-button variant="secondary">Center</nana-button> |
| 4 | <nana-button variant="secondary">Right</nana-button> |
| 5 | </nana-button-group> |
Spaced
Save Cancel
| 1 | <nana-button-group separated> |
| 2 | <nana-button variant="primary">Save</nana-button> |
| 3 | <nana-button variant="ghost">Cancel</nana-button> |
| 4 | </nana-button-group> |
Vertical
Profile Settings Sign out
| 1 | <nana-button-group orientation="vertical" aria-label="Actions"> |
| 2 | <nana-button variant="secondary">Profile</nana-button> |
| 3 | <nana-button variant="secondary">Settings</nana-button> |
| 4 | <nana-button variant="secondary">Sign out</nana-button> |
| 5 | </nana-button-group> |
Shared Size & Variant
Prev 1 2 Next
| 1 | <!-- size + variant cascade to every button --> |
| 2 | <nana-button-group size="lg" variant="primary" aria-label="Pager"> |
| 3 | <nana-button>Prev</nana-button> |
| 4 | <nana-button>1</nana-button> |
| 5 | <nana-button>2</nana-button> |
| 6 | <nana-button>Next</nana-button> |
| 7 | </nana-button-group> |
Customization
Buttons inherit their own theming; the group adds a radius variable for the
joined shape, and a base
part for layout tweaks.
| 1 | /* Radius of the joined group; use the base part for spacing/dividers */ |
| 2 | nana-button-group.rounded { --nana-button-group-radius: 9999px; } |
| 3 | nana-button-group.spaced::part(base) { gap: 0.75rem; } |
| CSS Variable | Description |
--nana-button-group-radius | Corner radius of the joined group |
| Part | Description |
base | The group container |
Props
| Attribute | Type | Default | Description |
orientation | horizontal | vertical | horizontal | Lay the buttons out in a row or a column |
separated | boolean | false | Space the buttons apart instead of joining them into one unit |
size | xs | sm | md | lg | xl | — | When set, applied to every slotted button |
variant | primary | secondary | ghost | danger | success | warning | — | When set, applied to every slotted button |
aria-label | string | — | Describes the group for assistive technology |
Accessibility
- The host is given
role="group" so assistive technology announces the buttons as a related set. - Provide an
aria-label describing the group's purpose (e.g. "Text alignment"). - Each button keeps its own focus ring; the hovered or focused button is raised above its neighbours so the ring is never clipped along a shared edge.