Button GroupNew

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

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>

<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" name="text-bold"></nord-icon>
    </nord-button>
    <nord-button size="s">
      <nord-icon label="Italic" name="text-italic"></nord-icon>
    </nord-button>
    <nord-button size="s">
      <nord-icon label="Underline" name="text-underline"></nord-icon>
    </nord-button>
    <nord-button size="s">
      <nord-icon label="Strike through" 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 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.