Segmented control
Segmented controls are helpful to show closely-related options users can choose from. They can be used to switch views for example.
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>