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-hiddenid = " label" > </ nord-visually-hidden> < nord-button-grouparia-labelledby = " label" > < nord-buttonvariant = " primary" > </ nord-button> < nord-dropdownsize = " s" align = " end" > < nord-buttonslot = " toggle" variant = " primary" > < nord-iconname = " arrow-down-small" > </ nord-icon> </ nord-button> < nord-dropdown-item> </ nord-dropdown-item> < nord-dropdown-item> </ nord-dropdown-item> < nord-dropdown-item> </ nord-dropdown-item> </ nord-dropdown> </ nord-button-group> < pclass = " n-typescale-m n-margin-be-s" id = " label" > </ p> < nord-button-grouparia-labelledby = " label" > < nord-button> Bold < nord-iconslot = " end" label = " Bold" name = " text-bold" > </ nord-icon> </ nord-button> < nord-button> Italic < nord-iconslot = " end" label = " Italic" name = " text-italic" > </ nord-icon> </ nord-button> < nord-button> Underline < nord-iconslot = " end" label = " Underline" name = " text-underline" > </ nord-icon> </ nord-button> < nord-button> Strikethrough < nord-iconslot = " 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-stackalign-items = " start" > < nord-visually-hiddenid = " label" > </ nord-visually-hidden> < nord-button-grouparia-labelledby = " label" > < nord-button> Bold < nord-iconslot = " start" name = " text-bold" > </ nord-icon> </ nord-button> < nord-button> Italics < nord-iconslot = " start" name = " text-italic" > </ nord-icon> </ nord-button> < nord-button> Underline < nord-iconslot = " start" name = " text-underline" > </ nord-icon> </ nord-button> < nord-button> Strikethrough < nord-iconslot = " start" name = " text-strike-through" > </ nord-icon> </ nord-button> </ nord-button-group> < nord-visually-hiddenid = " label" > </ nord-visually-hidden> < nord-button-groupdirection = " vertical" aria-labelledby = " label" style = " --n-button-text-align : start" > < nord-buttonexpand > Bold < nord-iconslot = " start" name = " text-bold" > </ nord-icon> </ nord-button> < nord-buttonexpand > Italics < nord-iconslot = " start" name = " text-italic" > </ nord-icon> </ nord-button> < nord-buttonexpand > Underline < nord-iconslot = " start" name = " text-underline" > </ nord-icon> </ nord-button> < nord-buttonexpand > Strikethrough < nord-iconslot = " start" name = " text-strike-through" > </ nord-icon> </ nord-button> </ nord-button-group> </ nord-stack> < nord-stackalign-items = " start" > < nord-visually-hiddenid = " label" > </ nord-visually-hidden> < nord-button-grouparia-labelledby = " label" > < nord-buttonsize = " s" > < nord-iconlabel = " Bold" size = " s" name = " text-bold" > </ nord-icon> </ nord-button> < nord-buttonsize = " s" > < nord-iconlabel = " Italic" size = " s" name = " text-italic" > </ nord-icon> </ nord-button> < nord-buttonsize = " s" > < nord-iconlabel = " Underline" size = " s" name = " text-underline" > </ nord-icon> </ nord-button> < nord-buttonsize = " s" > < nord-iconlabel = " Strike through" size = " s" name = " text-strike-through" > </ nord-icon> </ nord-button> </ nord-button-group> </ nord-stack> < nord-visually-hiddenid = " label" > </ nord-visually-hidden> < nord-button-grouparia-labelledby = " label" > < nord-button> < nord-iconslot = " start" name = " text-indent-increase" > </ nord-icon> Increase indent </ nord-button> < nord-button> < nord-iconslot = " start" name = " text-indent-decrease" > </ nord-icon> Decrease indent </ nord-button> < nord-dropdownsize = " s" > < nord-buttonslot = " toggle" > </ nord-button> < nord-dropdown-item> < nord-iconslot = " start" name = " text-left-align" > </ nord-icon> Align left </ nord-dropdown-item> < nord-dropdown-item> < nord-iconslot = " start" name = " text-right-align" > </ nord-icon> Align right </ nord-dropdown-item> < nord-dropdown-item> < nord-iconslot = " start" name = " text-center" > </ nord-icon> Align center </ nord-dropdown-item> < nord-dropdown-item> < nord-iconslot = " start" name = " text-justified" > </ nord-icon> Align justified </ nord-dropdown-item> </ nord-dropdown> < nord-button> < nord-iconslot = " start" name = " text-list" > </ nord-icon> List </ nord-button> </ nord-button-group> Properties Property Attribute Description Type Default directiondirectionThe direction of the button group.
"vertical" | "horizontal""horizontal"roleroleThe 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-radiusControls the rounded corners of the button, using border radius tokens .
var(--n-border-radius-s)--n-button-group-box-shadowControls 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.