You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Navigation

Tab

Underline Tabs

Underline Tabs are best used when switching between related content within a page.

Underline tabs have a minimum width of 48px. The text and hover/active underline are always equal in width beyond this minimum.

With Badges

With Icons

Tab Action

Tab actions, represented with a button or icon, can be represented as a tab itself. This can be useful for non-navigational actions related to the tab content such as adding a new tab.

Divided Tabs

A vertical pipe (|) divider can be applied to both sides of an inactive tab. This is useful when there are many tabs on a page.

Fitted

Underline tabs can be fitted to a card. This pattern should only be used when there are 2 or 3 tabs.

Index Tabs

Index Tabs are best used when switching between tabs only affects content within the visual container its attached to. They can also be nested within an underline tab.

Index tabs have a minimum width of 64px. The text and hover/active underline are always equal in width beyond this minimum.

With Badges

With Icons

Fitted

Max Width

Prevents a tab from exceeding 240px in length. When combined with the fitted property, can make tabs stretch to the maximum width.

Left Aligned Tab Text

By default, text is centered within a tab.

Divided Tabs

With a Background

Tabs can take advantage of different background colors. The blue active state and dividers are removed, and inactive tabs switch text color.

Sizing

A taller variation of index tabs can be used for important navigation at the top of a page.

Nested

If a page needs multiple levels of tabs, the index tab can be nested in a underline tab.

Responsive

Tabs will scroll horizontally when overflowed.

Best Practices

  • Avoid tab names over 2 words long.
  • Should be used with 2–10 choices.
  • Only 1 tab should be active at a time.
  • Avoid the disabled state. If a user cannot use it, remove it from the tab.
  • Content within a tab should be mutually exclusive from another tab's content.
  • A visual divider should always be present. The default divider is a gray line.
  • On tab switch, the <title> should change to reflect the new content.
  • More UX practices: Tabs, Used Right (NN Group)

Importing

import { TabGroup, Tab } from '@servicetitan/design-system';