# Segmented Control

## Visual Structure

```
ga-segmented-control
  └── ga-segmented-control__button [--selected] [--icon-only]
      └── ga-segmented-control__button-sr-label (optional)
```

## Elements Hierarchy

### Core Block

- `ga-segmented-control` - Main container for the entire segmented control component

### Mandatory Elements

- `ga-segmented-control__button` - Individual button segments within the control

### Optional Elements

- `ga-segmented-control__button-sr-label` - Hidden label for screen readers when using an icon-only button, alternative to aria-label

### Modifiers

- `ga-segmented-control__button--icon-only` - Styles the button to only display an icon. Make sure the icon is 16px in size.
- `ga-segmented-control__button--selected` - Styles the button as currently selected

## Examples

### Text

```html
<div class="ga-segmented-control">
  <button
    class="ga-segmented-control__button ga-segmented-control__button--selected"
  >
    All documents
  </button>
  <button class="ga-segmented-control__button">Invoices</button>
  <button class="ga-segmented-control__button">Expense claims</button>
</div>
```

### Icon

```html
<div class="ga-segmented-control">
  <button
    class="ga-segmented-control__button ga-segmented-control__button--icon-only ga-segmented-control__button--selected"
  >
    <!-- icon: tree-palm, size=16 -->
    <span class="ga-segmented-control__button-sr-label">Item 1</span>
  </button>
  <button
    class="ga-segmented-control__button ga-segmented-control__button--icon-only"
  >
    <!-- icon: hand, size=16 -->
    <span class="ga-segmented-control__button-sr-label">Item 2</span>
  </button>
  <button
    class="ga-segmented-control__button ga-segmented-control__button--icon-only"
    aria-label="Item 3"
  >
    <!-- icon: shopping-cart, size=16 -->
  </button>
</div>
```