Tab
A tab inside Tabs or a standalone navigation item.
label sets the caption, active marks selection, and href makes it a link. theme sets the appearance (line, pill, pill-secondary), and badge adds a badge after the label.
Live example
Example controls
Usage
import { Tab } from '@prosazhin/pbcomponents';
<Tab
label='Tab'
active={false}
/>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
label | string | Tab label. | — |
active | boolean | Active state of a standalone tab. | false |
indicator | boolean | Line below the active tab. | true |
theme | 'line' | 'pill' | 'pill-secondary'line · pill · pill-secondary | Tab appearance. | line |
badge | ReactElement<BadgeProps> | Badge to the right of the label. | — |
disabled | boolean | Disables interaction. | false |
leftIcon | SvgTypenone · check · search · user | Icon before the text; accepts an SVG component. | — |
rightIcon | SvgTypenone · check · search · user | Icon after the text; accepts an SVG component. | — |
leftIconClassName | string | Class of the left icon. | — |
rightIconClassName | string | Class of the right icon. | — |
onClick | (event) => void | Tab click handler. | — |
href | string | Renders a link instead of a button. | — |
linkComponent | ElementType | Custom link component, such as Next.js Link. | — |
target | '_self' | '_blank'_self · _blank | Where to open the link. | _self |
type | 'button' | 'reset' | 'submit'button · reset · submit | HTML button type. | button |
className | string | Class of the root element. | — |
textClassName | string | Class of the text part. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.