ButtonGroup
Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.
Properties
| 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) |
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. |
Integration
For integration guidelines, please see Web Components documentation .