Tabs
In-page tabs, with a line under the selected one.
import { Tabs, Tab } from '@iffday/ui';Example
Tabs draws the row of tabs, with a 2px dark line under the selected one; the page decides what to show for each value. A tab can hold a count-badge, as Articles and Lists do on a profile.
overview
import { useT } from '@iffday/i18n';
import { Tab, Tabs } from '@iffday/ui';
import { useState } from 'react';
export default function Example() {
const t = useT();
const [tab, setTab] = useState('overview');
return (
<div style={{ width: '100%' }}>
<Tabs value={tab} onValueChange={setTab}>
<Tab value="overview">{t('account.profile.overview')}</Tab>
<Tab value="activity">{t('account.profile.feed')}</Tab>
<Tab value="articles">
{t('account.profile.articles')} <span className="count-badge">4</span>
</Tab>
<Tab value="lists">
{t('account.profile.lists')} <span className="count-badge">12</span>
</Tab>
</Tabs>
<p style={{ color: 'var(--text-2)', marginTop: 16 }}>{tab}</p>
</div>
);
}Usage
- When the tabs do not fit, the row scrolls sideways without wrapping, and the scrollbar stays hidden.
- The arrow keys move between tabs; Base UI Tabs provides that.
- Tabs that change the address are links: put
<a>elements straight into.tabsand mark the current one witharia-current="page". They look the same.
Props
| Prop | Type | Default |
|---|---|---|
value* | string | |
onValueChange* | (value: string) => void | |
children* | ReactNode |
Exports BaseTabs.Tab as it is, with Base UI’s props (see the Base UI documentation).