# nord-button-group > Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls. ## 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 `role` attribute on the button group to provide additional semantics. - Use an `aria-labelledby` attribute 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 `role` attribute 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: > **Do:** View user settings > **Don't:** Click here 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): > **Do:** My tasks > **Don't:** My Tasks Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”: > **Do:** Add item > **Don't:** Add an item --- ## 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. | ## Examples ### Basic ```html Send options Send invoice Send later today Send tomorrow Mark as paid ``` ### Overview ```html Formatting controls Bold Italic Underline ``` ### Variants ```html Cancel Save changes ``` ### Active State ```html

Formatting options

Bold Italic Underline Strikethrough ``` ### Direction ```html Formatting controls Bold Italics Underline Strikethrough Formatting controls Bold Italics Underline Strikethrough ``` ### Single ```html Send options Send invoice Add button to group ``` ### Small Buttons ```html Formatting controls ``` ### Spaced ```html Cancel Save changes Export Create new Export data as Spreadsheet ``` ### With Dropdown ```html Paragraph formatting controls Increase indent Decrease indent Alignment Align left Align right Align center Align justified List ``` ## API Reference ### Properties - **variant** (`'default' | 'spaced'`, default: `'default'`) — The style variant of the button group. - **direction** (`'vertical' | 'horizontal'`, default: `'horizontal'`) — The direction of the button group. - **wrap** (`boolean`, default: `false`) — 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). - **role** (`string`, default: `'group'`) — The appropriate role for the containing element. ### Slots - **(default)** — The button group content ### CSS Custom Properties - `--n-button-group-border-radius` (default: `var(--n-border-radius-s)`) — Controls the rounded corners of the button group, using border radius tokens. Only relevant for the default variant. - `--n-button-group-box-shadow` (default: `var(--n-box-shadow)`) — Controls the surrounding shadow, using box shadow tokens. Only relevant for the default variant. - `--n-button-group-gap` (default: `calc(var(--n-space-s) + var(--n-space-xs))`) — 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".