Tabs

React v2

Package-backed React v2 Tabs on the pinned upstream construction, with approved SquareKit accessibility fixes layered in a separate wrapper.

Demo

hero
orientation
type
size
import { Lock01, User01, Users01 } from "@untitledui/icons"; import { Tabs } from "@/components/application/tabs/tabs"; <Tabs> <Tabs.List aria-label="Settings" type="button-brand"> <Tabs.Item id="details" icon={User01}>My details</Tabs.Item> <Tabs.Item id="password" icon={Lock01}>Password</Tabs.Item> <Tabs.Item id="team" icon={Users01} badge={4}>Team</Tabs.Item> </Tabs.List> </Tabs>

In context

in-context
View in a page

Family

family
The panel for Password.
Tabs
Tabs.List
Tabs.Item
The panel for Team.
Tabs.Panel

Types

cells

Five horizontal types at both sizes.

Size sm

button-brand, size sm
button-gray, size sm
button-border, size sm
button-minimal, size sm
underline, size sm

Size md

button-brand, size md
button-gray, size md
button-border, size md
button-minimal, size md
underline, size md

Layouts

cells

Vertical, size sm

button-brand
button-gray
button-border
button-minimal
line

Vertical, size md

button-brand
button-gray
button-border
button-minimal
line

fullWidth

button-brand, fullWidth
button-gray, fullWidth
button-border, fullWidth
button-minimal, fullWidth
underline, fullWidth

Content

cells
labels only
icons
badges, pill-color on button-brand
icons and badges
badges, modern on button-gray
badge counts: a number, zero, a string

Behaviour

cells
five tabs in a narrow column, scrolling
a long label widens the bar, never wraps
a rail takes its widest label

States

cells
selected, hover and focus, live: arrow keys move focus
The panel for Password.
the panel, a tab stop of its own
disabled, Password in disabledKeys