Segmented control

Segmented controls are helpful to show closely-related options users can choose from. They can be used to switch views for example.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Basic

<div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 1">
  <button class="nj-segmented-control-btn" type="button" aria-pressed="true" data-value="Item 1">Item 1</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
</div>

Disabled

<div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 1">
  <button class="nj-segmented-control-btn" type="button" aria-pressed="true" data-value="Item 1">Item 1</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2" disabled>Item 2</button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
</div>

Size variations

Small:

Medium (Default):

Large:

<div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-24); align-items: flex-start">
  <p style="margin: 0">Small:</p>
  <div class="nj-segmented-control nj-segmented-control--sm" role="group" aria-label="View" data-value="Item 1">
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
  </div>
  <p style="margin: 0">Medium (Default):</p>
  <div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 2">
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
  </div>
  <p style="margin: 0">Large:</p>
  <div class="nj-segmented-control nj-segmented-control--lg" role="group" aria-label="View" data-value="Item 3">
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">Item 1</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">Item 2</button>
    <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">Item 3</button>
  </div>
</div>

Icon only

<div class="nj-segmented-control" role="group" aria-label="View" data-value="Item 1">
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 1">
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_left</span>
    <span class="nj-sr-only">Align to left</span>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 2">
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_center</span>
    <span class="nj-sr-only">Center</span>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 3">
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_right</span>
    <span class="nj-sr-only">Align to right</span>
  </button>
  <button class="nj-segmented-control-btn" type="button" aria-pressed="false" data-value="Item 4" disabled>
    <span aria-hidden="true" class="material-icons nj-segmented-control-btn__icon">format_align_justify</span>
    <span class="nj-sr-only">Justify</span>
  </button>
</div>

Select