# Tabs

Status: stable

Switch between views of the same thing.

Tabs switch between views of the same thing without leaving the screen: Due, Submitted and History readings, for example. The selected tab has an accent underline.

Tabs are buttons with role="tab" inside a role="tablist". Move between them with the arrow keys, and show only the selected panel.

## Example

```html
<div class="at-tabs" role="tablist"><button type="button" class="at-tab" role="tab" aria-selected="true">Due</button><button type="button" class="at-tab" role="tab" aria-selected="false">Submitted</button><button type="button" class="at-tab" role="tab" aria-selected="false">History</button></div>
```

## Anatomy

1. **Selected tab**: color: var(--at-text); border-bottom: 2px solid var(--at-border-primary)

2. **Tab**: color: var(--at-text-subtle); font-size: var(--at-text-sm) /* 14px */; font-weight: var(--at-weight-bold)

3. **Tab list**: border-bottom: 1px solid var(--at-border); margin-bottom: var(--at-space-5) /* 16px */

## Size and spacing

- **Tab**: padding: var(--at-space-3) var(--at-space-4) /* 8px 12px */

- **Spacing**: gap between tabs: var(--at-space-2) /* 4px */

## Variants

### Tabs

Two to five tabs. Put the most used view first and select it by default.

```html
<div class="at-tabs" role="tablist"><button type="button" class="at-tab" role="tab" aria-selected="true">Overview</button><button type="button" class="at-tab" role="tab" aria-selected="false">Settings</button></div>
```

| State | Specification |

|---|---|

| Default | color: var(--at-text-subtle) |

| Hover | color: var(--at-text) |

| Focus | outline: 3px solid var(--at-border-focus); outline-offset: 2px |

| Selected | color: var(--at-text); border-bottom-color: var(--at-border-primary) |

## When to use

- Two to five views of the same thing.

## When not to use

- Steps in a process: show one step per page.
- Going to a different part of the app: use links.
- More than five views: use a select.

## Content

- One or two words per tab: "Due", "History".
- Do not put counts in every tab; add one only where it helps, such as "Due (3)".

## Do and don't

Do: Short labels for views of the same readings.

```html
<div class="at-tabs" role="tablist"><button type="button" class="at-tab" role="tab" aria-selected="true">Due</button><button type="button" class="at-tab" role="tab" aria-selected="false">Submitted</button><button type="button" class="at-tab" role="tab" aria-selected="false">History</button></div>
```

Don't: Tabs used as steps in a form.

```html
<div class="at-tabs" role="tablist"><button type="button" class="at-tab" role="tab" aria-selected="true">1. Details</button><button type="button" class="at-tab" role="tab" aria-selected="false">2. Pricing</button><button type="button" class="at-tab" role="tab" aria-selected="false">3. Confirm</button></div>
```

## Do

- Keep labels to one or two words.

## Don't

- Nest tabs.

## Code

```html
<div class="at-tabs" role="tablist">
  <button type="button" class="at-tab" role="tab" aria-selected="true">Due</button>
  <button type="button" class="at-tab" role="tab" aria-selected="false">Submitted</button>
  <button type="button" class="at-tab" role="tab" aria-selected="false">History</button>
</div>
<p>Due readings</p>
```

## Classes

| Class | What it does |

|---|---|

| `at-tabs` | Tab row |

| `at-tab` | One tab; aria-selected="true" marks the current one |

## Tokens

`--at-border`, `--at-text-subtle`, `--at-text`, `--at-border-primary`

## Accessibility

- Use role="tablist" / "tab" / "tabpanel" and move with arrow keys.