Forms & Inputs
Button Group
Groups related nana-button elements into a single visual unit — joined together (the default) or evenly spaced. Optionally propagates a shared size and variant to every button so they stay consistent.
Preview
Section titled “Preview”<nana-button-group>
<nana-button>Left</nana-button>
<nana-button>Middle</nana-button>
<nana-button>Right</nana-button>
</nana-button-group>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/button-group";Basic usage
Section titled “Basic usage”<nana-button-group> <nana-button>Left</nana-button> <nana-button>Middle</nana-button> <nana-button>Right</nana-button></nana-button-group>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
ariaLabel | aria-label | string | null | null | Accessible label for the group (maps to aria-label) |
orientation | orientation | ButtonGroupOrientation | 'horizontal' | Lay the buttons out in a row or a column |
separated | separated | boolean | false | Space the buttons apart instead of joining them into one seamless unit |
size | size | Size | undefined | — | When set, applied to every slotted button so they share one size |
variant | variant | Variant | undefined | — | When set, applied to every slotted button so they share one variant |
Slots
| Slot | Description |
|---|---|
(default) | One or more nana-button elements |
CSS parts
| Part | Description |
|---|---|
::part(base) | The group container |
CSS custom properties
| Property | Description |
|---|---|
--nana-button-group-radius | Corner radius of the joined group |
| Slot | Description |
|---|---|
(default) | One or more nana-button elements |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-button-group-radius | Corner radius of the joined group |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
base | The group container |
Accessibility
Section titled “Accessibility”- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Button Group interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook