Usage
Tabs are used to organize and navigate between related views at the same hierarchy level. Tabs can include icons to reinforce labels and counters to inform about the tab's content.
Do
Use short and scannable labels, with as few words as possible.
Don't
Don’t use long names as a label.
Do
Be consistent with the use of icons, and use them to reinforce the label.
Don't
- Don’t use icons for decorative purposes only, or if they don’t have a clear connection to the label.
- Don’t use icons only for some selected tabs.
Do
Use counters in tabs to provide meaningful feedback, for instance, notifications about specific sections.
Don't
Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.
Don't
Don’t add interactive elements, such as buttons and links, inside the tab item.
Examples
Live Preview
Props
Tabs
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
items | Array of objects that represents the list of TabItems for the tab component. The properties accepted are `label`, 'value', 'isActive' and 'iconName'. | array | [] | [ { label: String, value: String, isActive: Boolean, iconName: String, testId: String } ] |
aria-label | Defines a string value that labels the tab component. | string | tabs |
TabsItem
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
items | Array of objects that represents the list of TabItems for the tab component. The properties accepted are `label`, 'value', 'isActive' and 'iconName'. | array | [] | [ { label: String, value: String, isActive: Boolean, iconName: String, testId: String } ] |
aria-label | Defines a string value that labels the tab component. | string | tabs |
TabPanel
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
items | Array of objects that represents the list of TabItems for the tab component. The properties accepted are `label`, 'value', 'isActive' and 'iconName'. | array | [] | [ { label: String, value: String, isActive: Boolean, iconName: String, testId: String } ] |
aria-label | Defines a string value that labels the tab component. | string | tabs |
Slots
Tabs
| Name | Description |
|---|---|
default | Default content slot |
TabsItem
| Name | Description |
|---|---|
default | Default content slot |
TabPanel
| Name | Description |
|---|---|
default | Default content slot |
Events
Tabs
| Name | Description | Type |
|---|---|---|
change | This event is emitted when active tab change. | { "names": [ "String" ] } |
TabsItem
| Name | Description | Type |
|---|---|---|
change | This event is emitted when active tab change. | { "names": [ "String" ] } |