Button GroupDraft Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.
Example: Basic Example: Active state Example: Direction Example: Small buttons Example: With dropdown Theme: Light default Theme: Light high contrast Theme: Dark default Theme: Dark high contrast 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>
< p class = " n-typescale-m n-margin-be-s" id = " label" > Formatting options</ p> < nord-button-group aria-labelledby = " label" > < nord-button> Bold < nord-icon slot = " end" label = " Bold" name = " text-bold" > </ nord-icon> </ nord-button> < nord-button> Italic < nord-icon slot = " end" label = " Italic" name = " text-italic" > </ nord-icon> </ nord-button> < nord-button> Underline < nord-icon slot = " end" label = " Underline" name = " text-underline" > </ nord-icon> </ nord-button> < nord-button> Strikethrough < nord-icon slot = " end" label = " Strike through" name = " text-strike-through" > </ nord-icon> </ nord-button> </ nord-button-group> < script> document. querySelector ( "nord-button-group" ) . addEventListener ( "click" , event => { event. target. setAttribute ( "aria-pressed" , event. target. getAttribute ( "aria-pressed" ) !== "true" ) } ) </ script>
< nord-stack align-items = " start" > < nord-visually-hidden id = " label" > Formatting controls</ nord-visually-hidden> < nord-button-group aria-labelledby = " label" > < nord-button> Bold < nord-icon slot = " start" name = " text-bold" > </ nord-icon> </ nord-button> < nord-button> Italics < nord-icon slot = " start" name = " text-italic" > </ nord-icon> </ nord-button> < nord-button> Underline < nord-icon slot = " start" name = " text-underline" > </ nord-icon> </ nord-button> < nord-button> Strikethrough < nord-icon slot = " start" name = " text-strike-through" > </ nord-icon> </ nord-button> </ nord-button-group> < nord-visually-hidden id = " label" > Formatting controls</ nord-visually-hidden> < nord-button-group direction = " vertical" aria-labelledby = " label" style = " --n-button-text-align : start" > < nord-button expand > Bold < nord-icon slot = " start" name = " text-bold" > </ nord-icon> </ nord-button> < nord-button expand > Italics < nord-icon slot = " start" name = " text-italic" > </ nord-icon> </ nord-button> < nord-button expand > Underline < nord-icon slot = " start" name = " text-underline" > </ nord-icon> </ nord-button> < nord-button expand > Strikethrough < nord-icon slot = " start" name = " text-strike-through" > </ nord-icon> </ nord-button> </ nord-button-group> </ nord-stack>
< nord-stack align-items = " start" > < nord-visually-hidden id = " label" > Formatting controls</ nord-visually-hidden> < nord-button-group aria-labelledby = " label" > < nord-button size = " s" > < nord-icon label = " Bold" size = " s" name = " text-bold" > </ nord-icon> </ nord-button> < nord-button size = " s" > < nord-icon label = " Italic" size = " s" name = " text-italic" > </ nord-icon> </ nord-button> < nord-button size = " s" > < nord-icon label = " Underline" size = " s" name = " text-underline" > </ nord-icon> </ nord-button> < nord-button size = " s" > < nord-icon label = " Strike through" size = " s" name = " text-strike-through" > </ nord-icon> </ nord-button> </ nord-button-group> </ nord-stack>
< nord-visually-hidden id = " label" > Paragraph formatting controls</ nord-visually-hidden> < nord-button-group aria-labelledby = " label" > < nord-button> < nord-icon slot = " start" name = " text-indent-increase" > </ nord-icon> Increase indent </ nord-button> < nord-button> < nord-icon slot = " start" name = " text-indent-decrease" > </ nord-icon> Decrease indent </ nord-button> < nord-dropdown size = " s" > < nord-button slot = " toggle" > Alignment</ nord-button> < nord-dropdown-item> < nord-icon slot = " start" name = " text-left-align" > </ nord-icon> Align left </ nord-dropdown-item> < nord-dropdown-item> < nord-icon slot = " start" name = " text-right-align" > </ nord-icon> Align right </ nord-dropdown-item> < nord-dropdown-item> < nord-icon slot = " start" name = " text-center" > </ nord-icon> Align center </ nord-dropdown-item> < nord-dropdown-item> < nord-icon slot = " start" name = " text-justified" > </ nord-icon> Align justified </ nord-dropdown-item> </ nord-dropdown> < nord-button> < nord-icon slot = " start" name = " text-list" > </ nord-icon> List </ nord-button> </ nord-button-group>
Properties Property Attribute Description Type Default direction
direction
The direction of the button group.
"vertical" | "horizontal"
"horizontal"
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, 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
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.