Usage
Button Group brings together a set of related buttons, such as text formatting controls. The default variant joins the buttons into a single connected control, while spaced keeps them as distinct buttons with consistent spacing.
import "@nordhealth/components/lib/ButtonGroup"
Examples
Variants
The default variant joins buttons into a connected control. Use variant="spaced" to keep them visually separate, for example a cancel and confirm pair.
Direction
Set direction="vertical" to stack the buttons. Combine with expand on the buttons for a uniform width.
Small icon buttons
Group compact, icon-only buttons by giving each button size="s".
Split button
Pair a primary action with a dropdown of related actions inside a group.
Single button
A button group with one button keeps consistent styling for layouts that may grow to several actions.
Spaced
Use variant="spaced" to keep buttons visually separate while still grouped, for example a cancel and confirm pair.
Active state
Manage aria-pressed on each button to build a toggle-style group where one option is active.
With dropdown
Combine a button group with a dropdown to expose additional related actions.
RTL
Button groups follow the document or container direction. Toggle the direction to see the buttons reorder.
Accessibility
- Button Group exposes
role="group", but it has no accessible name of its own — label it witharia-labelledbypointing at a visible heading or anord-visually-hiddenelement so the group's purpose is announced. - For icon-only buttons, give each
nord-iconalabelso every control has an accessible name. - For toggle-style controls, manage
aria-pressedon each button so screen readers can convey which options are active.
API reference
ButtonGroup
Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.
<nord-button-group></nord-button-group>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant | variant | The style variant of the button group. | 'default' | 'spaced' | 'default' |
direction | direction | The direction of the button group. | 'vertical' | 'horizontal' | 'horizontal' |
wrap | wrap | Defines whether the buttons are forced in a single line
or can be flowed into multiple lines (only applied when variant is set to spaced). | boolean | false |
role | role | The appropriate role for the containing element. | string | 'group' |
Slots
| Slot name | Description |
|---|---|
Default slot | The button group content |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-button-group-border-radius | Controls the rounded corners of the button group, using border radius tokens. Only relevant for the default variant. | var(--n-border-radius-s) |
--n-button-group-box-shadow | Controls the surrounding shadow, using box shadow tokens. Only relevant for the default variant. | var(--n-box-shadow) |
--n-button-group-gap | Controls the gap between buttons, using space tokens. Only relevant for the spaced variant. Defaults to var(--n-space-s) when all slotted controls are size="s". | calc(var(--n-space-s) + var(--n-space-xs)) |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to group together buttons, or dropdowns, of a similar nature or purpose.
- Use the appropriate
roleattribute on the button group to provide additional semantics. - Use an
aria-labelledbyattribute referencing another element to best explain the contents of the button group.
Don’t
- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.
- Don’t skip the addition of an appropriate label if the added
roleattribute value calls for it. - Don’t use for building grid based layouts.
Content guidelines
Button labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:
When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:
Variants
This section describes the different component variants, their purpose, and when to use each variant.
| Name | Purpose |
|---|---|
default | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |
spaced | The spaced variant renders a gap between the buttons to space them out evenly. |