Skip to content
On this page

Tab

A Tab is one of the selectable items included within Tabs.

Guidelines

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.

Example of different Codex Tab items creating a Tabs component.

Specifications

Specification of Tab item.

Each tab item may include the following elements:

  1. Text
    Currently, tab items solely consist of text elements within the tab, without the inclusion of icons or visual indicators.
  2. 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.

Types

As documented in Tabs, there are two different type of tab items depending on the tabs' style and where they are employed:

Example of quiet tabs.

Quiet tabs: They are used on white non-boxed backgrounds.

Example of framed tabs.

Framed tabs: They are used within boxes or modules.


 

Interaction states

Both quiet and framed tab items have the following visually separate states:

Quiet tab item.

Interaction states of the quiet tab item: default, hover, active, selected, focus, and disabled.

Framed tab item.

Interaction states of the framed tab item: default, hover, active, selected, focus, and disabled.

  1. Default (unselected)
  2. Hover
  3. Active
  4. Selected
  5. Focus
  6. Disabled

Demos

Configurable example

The demo below allows for configuration of name, label, and disabled props, as well as slot content.

NameValue
Props
disabled
tabName
label
Slots
default
View
Reading direction

Vue usage

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.

Props

Prop nameDescriptionTypeDefault
name(required)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.string
labelLabel that corresponds to this Tab in the Tabs component's header. Lengthy labels will be truncated.string''
disabledWhether or not the tab is disabled. Disabled tabs cannot be accessed via label clicks or keyboard navigation.booleanfalse

Slots

NameDescriptionBindings
defaultTab content

CSS-only version

See the Tabs page to learn how to build a CSS-only tabbed layout.