Tabs
BetaBatch C. Switch between views in the same place.
When to use
Use to switch between related views of the same thing.
When not to use
Don't use for steps in a sequence, or when people need to compare content side by side.
Anatomy
Panel content
- Tab list, named for screen readers
- Tabs
- Line under the selected tab
- Panel
Variants
One style. The tab row scrolls sideways when the tabs do not fit; they never wrap.
States
Pictures of each state. Use the live example on the Code tab to try the component.
| Default | Hover | Focus-visible | Selected | Disabled | |
|---|---|---|---|---|---|
| md | |||||
| sm |