Tabs
Tabs are interactive elements that work alongside Tab and Tab Panel to organise content into separate sections or views.
For Tabs to function correctly they must include corresponding Tab and Tab Panel components.
The label attribute on the Tab component provides the Tab with label text.
The icon attribute on the Tab component can set to display an icon from the icon library on the component.
The preferred way to add icons is to use the icon slot.
The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
The icon-trailing attribute on the Tab component positions the icon after the label text.
The removable attribute on the Tab component adds a close button to the tab.
Clicking the close button or pressing the DELETE key when focussed on the tab will emit the close event.
Triggering the close event does not automatically close the tab and tab panel. This needs to be handled in the consuming application as in the example below.
The consuming application must also handle whether the user can close all the tabs or not.
The disabled attribute on the Tab component disables the Tab.
The shape attribute on the Tab component controls the style of the background in hover state. It can be rounded or shape.
The shape variations should not be used in the tab set of tabs. The example above is for demonstration purposes only.
The orientation attribute on the Tabs component controls which axis the tabs are aligned. Below is an example of vertical alignment.
Use the connotation attribute on the Tabs component to control the color of the active tab. Below it is set to cta.
Use the activeid attribute on the Tabs component to control which tab is active on first render. The activeid attribute must match an id given to the Tab component.
Use the gutters attribute on the Tabs component to control the spacing inside the Tab Panels. It can be set to small (default) or none (demonstrated in the example below).
The tabs-layout attribute on the Tabs component controls the tabs layout. When set to stretch, the tabs will stretch to fill the available space. It will have no effect when the tabs are in a vertical orientation.
Use the scrollable-panel attribute combined with setting a block-size style to the Tabs component to make the content scrollable.