Tab list
Also known as: Page navigation, segmented control
Preview
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Sm | Md | Md |
Selected Variant | Default | Active | Default |
State Variant | Default | Hover | Focus | Default |
Start item Boolean | true | false | false |
Label Text | string | Label |
End item Boolean | true | false | false |
When to use
You need to switch between multiple content sections within the same page.
The content under each tab is related and should be easily comparable.
There are only two options, use a segmented control instead.
The content under each tab is independent and not meant for quick comparisons.
States
Tab list (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
| State | Context |
|---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |