A Tab is one of the selectable items included within Tabs.
Using tab items
Two or more tab items are grouped to create a Tabs component. Tab items cannot be used individually. For example, different tab items can represent the different sections of an article. A tab includes a label, which displays in the tabs list, and its associated content.
Each tab item may include the following elements:
Currently, tab items solely consist of text elements within the tab, without the inclusion of icons or visual indicators.
- Selected indicator
Both quiet and framed tabs feature a visual indicator when selected. In the case of quiet tabs, this indicator is a blue line positioned below the tab text, which is also colored blue. In contrast, framed tabs use a white background behind the tab text to indicate their selected state.
A Tab will also contain the content that should display when that tab is active.
As documented in Tabs, there are two different type of tab items depending on the tabs' style and where they are employed:
Quiet tabs: They are used on white non-boxed backgrounds.
Framed tabs: They are used within boxes or modules.
Both quiet and framed tab items have the following visually separate states:
Quiet tab item.
Framed tab item.
- Default (unselected)
Tabs allow a reader to access contained, structured content blocks that make pages easier to read. To make the UI effective and consistent, keep tab names short and descriptive.
The demo below allows for configuration of
disabled props, as well as slot content.
This component can display arbitrary content, including markup, via its default slot. The provided content is wrapped in a
<section> tag and given an HTML ID.
Must be used with Tabs component
This component is only meant to be used inside the default
<slot> of the
<Tabs> component. It cannot be used as a standalone component. See the Tabs documentation for more information.
|String name of the tab, used for programmatic selection. Each Tab inside a layout must have a unique name. This prop will also be used as the tab label if no "label" prop is provided.|
|Label that corresponds to this Tab in the Tabs component's header. Lengthy labels will be truncated.|
|Whether or not the tab is disabled. Disabled tabs cannot be accessed via label clicks or keyboard navigation.|
See the Tabs page to learn how to build a CSS-only tabbed layout.