Tabs are used to segregate information into logical sections and allow users to navigate easily between views within the same context.

Component Status

Design kit: RELEASED

Bobwai Component: bobwai–tab RELEASED

Content Overview

Overview
Anatomy
Variants
- Density
Behavior
Keyboard interaction
Related Components

Usage

Use tabs

to navigate between views within the same context,
to segregate large amount data which are related to each other,
for hierarchical structures - segregate data to smaller subcategories the user can navigate through.

Do NOT use tabs

for different topics which might not be related,
to navigate to separate view/page which might or might not be related to the current view,
for sequential content which requires users to go step-by-step or to follow a specific path.

Anatomy

Tabs

Tab - Can contain a number or an icon, longer text is truncated by ellipsis and full value is displayed in a tooltip on hover.
Plus button (optional) - Adds an additional tab.
Overflow menu button (optional) - When there is not enough space for all tabs, they will be displayed in a list invoked by this button.
Horizontal divider- Horizontal line dividing tabs from the content, leads to the end of the content.

Tab

Left icon (optional) - to be used on condensed spaces - icons represents visually content of the tab.
Text (optional) - to be used by default, shortly describes content of the tab.
Close icon (optional) - to be used on removable tab variants only.
Counter text (optional) - displays number of items (of table or list) inside the tab
Badge (optional) - is displayed only in a case of problem inside the tab
Bottom border - helps to distinguish which tab is selected

Variants

Default Tabs

By default tabs are represented only by the text describing content of each tab.

Icon Only Tabs

In places where there is a lack of space (e.g. color-picker, sidebars, ...) for default tab. Icon visually represents content of each tab.

Tabs With Counters

When tabs contain lists or tables where there is helpful to know amounts of items, the counters can be used.

Removable Tabs

Removable tabs should be used occasionally and only on places where their appearance is required.

Tab Sizes

Medium – default size
Small – condensed variants (Technical applications, e.g. Scaler.)

Tabs Construction

Use Stack component to align each tab next to each other.

Tabs Behaviors

Warning

Use warning badges to indicate a higher level of urgency and importance.

Error

Use error to inform users about issues.

Adding Tabs (optional)

New tab can be added via the plus button.

Deleting Tabs (optional)

Tabs can be deleted via "X" icon on tab.

Overflow (optional)

If the tabs are longer than the parent element, tabs can be hidden in an overflow menu, triggered by a button or a keyboard key: <Enter> or <Space>.

Keyboard Interaction

Tab	Initial focus is on the first tab. If the tabs component is already in focus, it moves focus to the next element which is the first element that accepts a user input in the page tab sequence.
Left Arrow	Moves focus to the previous tab item. If the focus is on the first tab item, it moves focus to the last tab item.
Right Arrow	Moves focus to the next tab item. If the focus is on the last tab item, it moves focus to the first tab item.
Space or Enter	Activates the tab item in focus.
Delete (optional)	When deletion is allowed, <Delete> closes the currently activated tab item. If any tab items remain, it moves the focus to the tab item following one that was closed.

Related Components

Navigation

Style

Tab Elements

Tab States

Used In	Type	px	Token
Text color	Color		color-text-interactive-200
Text font	Font		font-body
Close icon color	Color		color-icon-100
Close icon size	Size		sizing-icon-200
Background color	Color		color-bg-tab
Background corner radius - top left/right	Corner radius	8	radius-300
Background corner radius - bottom left/right	Corner radius	2	radius-100
Border width	Size	2	border-width-200
Border color	Color		color-border-100
Border opacity	Opacity		opacity-100
Hover
Background color	Color		color-bg-tab-hover (1)
Pressed
Background color	Color		color-bg-tab-pressed
Selected
Background color	Color		color-bg-tab-selected
Text color	Color		color-text-interactive-300
Bottom border width	Size	2	border-width-200
Bottom border color	Color		color-border-500
Disabled
Disabled (applied on the whole object)	Opacity		opacity-disabled
Focus
Focus border color	Color		color-focus-200
Focus border width	Width	1	border-width-100
Focus border corner radius	Corner radius		radius-button-200
Focus inner spacing	Spacing	2	spacing-100

^{(1) Do not use hover style when the button is selected}

Icon Tab States

Used In	Type	px	Token
Icon color	Color		color-icon-100
Icon size	Size		sizing-icon-200
Background color	Color		color-bg-interactive-200
Background corner radius - top left/right	Corner radius	8	radius-300
Background corner radius - bottom left/right	Corner radius	2	radius-100
Border width	Size	2	border-width-200
Border color	Color		color-border-100
Border opacity	Opacity		opacity-100
Hover
Background color	Color		color-bg-interactive-200-hover (1)
Pressed
Background color	Color		color-bg-interactive-200-pressed
Selected
Background color	Color		color-bg-interactive-200
Icon color	Color		color-icon-300
Bottom border width	Size	2	border-width-200
Bottom border color	Color		color-border-500
Disabled
Disabled (applied on the whole object)	Opacity		opacity-disabled
Focus
Focus border color	Color		color-focus-200
Focus border width	Width	1	border-width-100
Focus border corner radius	Corner radius		radius-button-200
Focus inner spacing	Spacing	2	spacing-100

^{(1) Do not use hover style when the button is selected}

Overflow Menu Button and Plus Button

Used In	Type	PX/Value	Token/Component
Overflow menu button	Toolbar button	28 px
Padding around buttons	Spacing	4 px	`spacing-200`

Spacing

Tabs

Max width of a text in tab is 160px.

Used In	Type	px	Token
Default left & right padding	Spacing	12	`spacing-400`
Default top & bottom padding	Spacing	8	`spacing-300`
Default size spacing between icons and text	Spacing	4	`spacing-200`
Default padding between tabs	Spacing	4	`spacing-200`
Condensed left & right padding	Spacing	8	`spacing-300`
Condensed top & bottom padding	Spacing	4	`spacing-200`
Condensed size spacing between icons and text	Spacing	2	`spacing-100`
Condensed padding between tabs	Spacing	2	`spacing-100`

Overflow Menu Button and Plus Button

Used In	Type	PX	Token
Default padding	Spacing	4	`spacing-200`
Condensed padding	Spacing	2	`spacing-100`

Accessibility

Keyboard Activation

Each tab must have a unique title that clearly describes tab panel content.
Deciding When to Make Selection Automatically Follow Focus
W3C WAI-ARIA Tab Design Pattern

Inspire Design System : Tabs

Tabs are used to segregate information into logical sections and allow users to navigate easily between views within the same context.

Component Status

Usage

Anatomy

Tabs

Tab

Variants

Default Tabs

Icon Only Tabs

Tabs With Counters

Removable Tabs

Tab Sizes

Tabs Behaviors

Warning

Error

Adding Tabs (optional)

Deleting Tabs (optional)

Overflow (optional)

Keyboard Interaction

Related Components

Style

Tab Elements

Tab States

Icon Tab States

Tabs

Overflow Menu Button and Plus Button

Accessibility

Keyboard Activation

Attachments: