Tabs
Single tab: Underline, Pill or Segmented.
Variants: 30
| Property | Type / options |
|---|---|
| Label | text |
| Icon | boolean (off) |
| Icon swap | instance swap (icon) |
| Count | boolean (off) |
| Count number | text |
| Style | Underline · Pill · Segmented |
| Size | sm · md |
| State | Default · Hover · Active · Focused · Disabled |
Tab bar built from Tab.
Variants: 3
| Property | Type / options |
|---|---|
| Style | Underline · Pill · Segmented |
Do
- Use for views of the same content.
- Keep labels short; add counts.
- Use Vertical tabs for settings.
Don’t
- Don’t use for sequential steps.
- Don’t exceed seven tabs.
- Don’t mix styles on one page.
Vertical tabs
Section titled “Vertical tabs”Side navigation for settings and long forms.
Variants: 2
| Property | Type / options |
|---|---|
| Style | Line · Pill |