Uihub

Appearance

Segmented Buttons ​

Usage ​

See design usage guidelines

Default ​

html
<div role="group" aria-label="Segmented control" class="segmented-button">
    <button class="segmented-button-item active">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
</div>

1st Variation ​

html
<div role="group" aria-label="Segmented control" class="segmented-button type-1">
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item active">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
</div>

2st Variation ​

html
<div role="group" aria-label="Segmented control" class="segmented-button type-2">
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item active">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
</div>

3st Variation ​

html
<div role="group" aria-label="Segmented control" class="segmented-button type-3">
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item">Label</button>
    <button class="segmented-button-item active">Label</button>
</div>

Usage Guidelines ​