Tab
<ns-tab> 
Overview
The singular tab that dictates what the area is about.
✨ This is an auto-generated AI summary of the ns-tab's documentation. It may not be accurate. ✨
The ns-tab is the button that changes the content in the ns-tabs when clicked. It shows the user relevant content with a heading and an optional icon.
Examples
Guidance
Implementation
Placement
The ns-tab component can only be used as a child of the <ns-tabs> element.
Specification
Attributes
selected
- Property
selected- Description
- The toggle to show the content associated with the tab.
- Type
boolean- Default
false
icon
- Property
icon- Description
- The decorative icon provide visual aid to tab content.
- Type
string- Options
- Refer to our icons.
- Default
aria-selected
- Property
ariaSelected- Type
string- Default
false
role
- Property
role- Description
- The read-only accessibility feature to indicate the tab will display the associated content in `tabpanel` role when selected.
- Type
string- Default
tab
tabindex
- Property
tabIndex- Type
number- Default
0
type
- Property
type- Type
string- Default
standard
Slots
| Slot | Permitted tags | Description |
|---|---|---|
| Anonymous slot | The text of the tab that needs to be related to the content of the associated element with `tabpanel` role. |
Events
| Name | Description |
|---|---|
tabselected | Dispatched with the tab is selected. |
Figma
Please note: The ns-tab Figma component configuration instructions
are available only to members of the British Gas workspace who have access to the
Nucleus Figma UI Kit.
(Opens in Figma).
Last updated: