Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

Button GroupDraft

Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-visually-hidden id="label">Send options</nord-visually-hidden>
<nord-button-group aria-labelledby="label">
<nord-button variant="primary">Send invoice</nord-button>
<nord-dropdown size="s" align="end">
<nord-button slot="toggle" variant="primary">
<nord-icon name="arrow-down-small"></nord-icon>
</nord-button>
<nord-dropdown-item>Send later today</nord-dropdown-item>
<nord-dropdown-item>Send tomorrow</nord-dropdown-item>
<nord-dropdown-item>Mark as paid</nord-dropdown-item>
</nord-dropdown>
</nord-button-group>

Properties

PropertyAttributeDescriptionTypeDefault
directiondirection

The direction of the button group.

"vertical" | "horizontal""horizontal"
rolerole

The appropriate role for the containing element.

string"group"

Slots

Slot nameDescription
Default slotThe 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.

PropertyDescriptionDefault
--n-button-group-border-radius

Controls the rounded corners of the button, using border radius tokens.

var(--n-border-radius-s)
--n-button-group-box-shadow

Controls the surrounding shadow, using box shadow tokens.

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 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 group labels should be accurate and predictable.


Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.