Preview loads on approachPreview loads on approach
Exact source · tab-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {useState} from 'react';
import {TabList, Tab} from '@astryxdesign/core/TabList';
import {Badge} from '@astryxdesign/core/Badge';
export default function TabShowcase() {
const [value, setValue] = useState('inbox');
return (
<TabList value={value} onChange={setValue}>
<Tab
value="inbox"
label="Inbox"
endContent={<Badge label="3" variant="info" />}
/>
</TabList>
);
}
Usage
Individual tab item that renders as a button or an anchor link, with selected-state styling and optional icons.
Typed props
Prop
Type and behavior
value
string · required
Unique value for this tab, matched against TabListContext.value.
label
string · required
Accessible label for this tab. Used as visible text by default, or as aria-label when isLabelHidden is true.
isLabelHidden
boolean · default false
Whether the label is visually hidden. When true, only the icon and endContent are displayed, and label is used as aria-label for accessibility.
href
string
URL to navigate to; when provided, the tab renders as an anchor element. Ignored in a TabList given an explicit role="tablist".
panelId
string
Id of the panel this tab controls, wired up as aria-controls where the TabList speaks the tabs pattern. Put the same id on the panel element. No effect under the navigation pattern, and a development warning says so.
as
LinkComponentType
Custom component to render instead of <a> for link tabs. Overrides the LinkProvider default. Only applies when href is provided.
