Tabs
Tabs help to organize related content in a single view, making it easy to explore and switch between different views.
Default
Default Tabs usage. Arrow keys move between tabs, Home and End jump to the ends.
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
<div data-tabs>
<div role="tablist" aria-label="Default tabs" class="-mx-1 flex gap-6 overflow-x-auto border-b border-border px-1">
<button
type="button"
role="tab"
data-tab="home"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="true"
tabindex="0"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-primary text-primary"
>Home</button>
<button
type="button"
role="tab"
data-tab="profile"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading"
>Profile</button>
<button
type="button"
role="tab"
data-tab="contact"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading"
>Contact</button>
</div>
<div
role="tabpanel"
data-tab-panel="home"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="profile"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="contact"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
</div>Pill
You can change the Tabs style by swapping the trigger classes — here the active tab is a filled pill instead of an underline.
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
<div data-tabs>
<div role="tablist" aria-label="Pill tabs" class="flex gap-1 overflow-x-auto pb-1">
<button
type="button"
role="tab"
data-tab="home"
data-tab-on="bg-primary text-on-primary"
data-tab-off="text-muted hover:bg-subtle hover:text-heading"
aria-selected="true"
tabindex="0"
class="shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary bg-primary text-on-primary"
>Home</button>
<button
type="button"
role="tab"
data-tab="profile"
data-tab-on="bg-primary text-on-primary"
data-tab-off="text-muted hover:bg-subtle hover:text-heading"
aria-selected="false"
tabindex="-1"
class="shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary text-muted hover:bg-subtle hover:text-heading"
>Profile</button>
<button
type="button"
role="tab"
data-tab="contact"
data-tab-on="bg-primary text-on-primary"
data-tab-off="text-muted hover:bg-subtle hover:text-heading"
aria-selected="false"
tabindex="-1"
class="shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary text-muted hover:bg-subtle hover:text-heading"
>Contact</button>
</div>
<div
role="tabpanel"
data-tab-panel="home"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="profile"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="contact"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
</div>Icons
Add an icon before the label; the flex gap handles the spacing.
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
<div data-tabs>
<div role="tablist" aria-label="Tabs with icons" class="-mx-1 flex gap-6 overflow-x-auto border-b border-border px-1">
<button
type="button"
role="tab"
data-tab="home"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="true"
tabindex="0"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-primary text-primary inline-flex items-center gap-2"
>
<i class="ph ph-house text-base"></i>
<span>Home</span>
</button>
<button
type="button"
role="tab"
data-tab="profile"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading inline-flex items-center gap-2"
>
<i class="ph ph-user text-base"></i>
<span>Profile</span>
</button>
<button
type="button"
role="tab"
data-tab="contact"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading inline-flex items-center gap-2"
>
<i class="ph ph-phone text-base"></i>
<span>Contact</span>
</button>
</div>
<div
role="tabpanel"
data-tab-panel="home"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="profile"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="contact"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
</div>Disabled
Add the
disabled
attribute to a trigger to make it unselectable. Keyboard
navigation skips it.
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
<div data-tabs>
<div role="tablist" aria-label="Tabs with a disabled item" class="-mx-1 flex gap-6 overflow-x-auto border-b border-border px-1">
<button
type="button"
role="tab"
data-tab="home"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="true"
tabindex="0"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-primary text-primary"
>Home</button>
<button
type="button"
role="tab"
data-tab="profile"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading"
>Profile</button>
<button
type="button"
role="tab"
data-tab="contact"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
disabled
aria-disabled="true"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading cursor-not-allowed opacity-50"
>Contact</button>
</div>
<div
role="tabpanel"
data-tab-panel="home"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="profile"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="contact"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
</div>Controlled Tabs
Drive the active tab from outside the group, and read the current value back out.
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
<div class="space-y-4">
<div class="flex flex-wrap items-center gap-2">
<button
type="button"
data-tab-control="home"
data-tab-control-for="controlled"
class="rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-text transition-colors hover:border-primary hover:text-primary"
>
Go to Home
</button>
<button
type="button"
data-tab-control="profile"
data-tab-control-for="controlled"
class="rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-text transition-colors hover:border-primary hover:text-primary"
>
Go to Profile
</button>
<button
type="button"
data-tab-control="contact"
data-tab-control-for="controlled"
class="rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-text transition-colors hover:border-primary hover:text-primary"
>
Go to Contact
</button>
<span class="text-sm text-muted"
>Active: <span class="font-medium text-heading" data-tab-readout="controlled">home</span></span
>
</div>
<div data-tabs data-tabs-id="controlled">
<div role="tablist" aria-label="Controlled tabs" class="-mx-1 flex gap-6 overflow-x-auto border-b border-border px-1">
<button
type="button"
role="tab"
data-tab="home"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="true"
tabindex="0"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-primary text-primary"
>Home</button>
<button
type="button"
role="tab"
data-tab="profile"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading"
>Profile</button>
<button
type="button"
role="tab"
data-tab="contact"
data-tab-on="border-primary text-primary"
data-tab-off="border-transparent text-muted hover:border-border-strong hover:text-heading"
aria-selected="false"
tabindex="-1"
class="-mb-px shrink-0 whitespace-nowrap border-b-2 px-1 pb-3 pt-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary border-transparent text-muted hover:border-border-strong hover:text-heading"
>Contact</button>
</div>
<div
role="tabpanel"
data-tab-panel="home"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="profile"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
<div
role="tabpanel"
data-tab-panel="contact"
class="hidden"
>
<p class="pt-4 text-sm leading-relaxed text-text">If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)</p>
</div>
</div>
</div>