Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
View RTL
<nord-visually-hiddenid="label">Send options</nord-visually-hidden><nord-button-grouparia-labelledby="label"><nord-buttonvariant="primary">Send invoice</nord-button><nord-dropdownsize="s"align="end"><nord-buttonslot="toggle"variant="primary"><nord-iconname="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>
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
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:
View user settings
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):
My tasks
My Tasks
Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:
Add item
Add an item
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
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.