Skip to content

Tab

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

Guidelines

When to use 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.

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.

Component limitations

The maximum width for each Tab item is size-1600 token (equivalent to 256px in the default Codex theme), with an ellipsis appearing if the text exceeds this length.

Maximum width example of Tab component.

Refer to the Tabs component with Tab items in Codex Figma

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

Best practices

Consider the following recommendations when using Tabs.

Tabs with its items navigating to related content.

Do:
  • Use Tabs to navigate between various sections of related content.

Tabs with its items navigating to sections of the same page.

Don't:
  • Use Tabs to structure content meant to be consumed sequentially, like the sections within an article page.

Content

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.

Tabs conveying an example of short, concise titles for sections.

Do:

Tabs conveying an example of mixing verbs and nouns.

Don't:

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.