| Name | Description | Default | Type |
|---|---|---|---|
currentTabId* | The currentTabId tells the tab list which Tab should be active. | | string |
tabs* | An array of Tab data used to render the individual tabs. | [] | Tab[] |
className | Additional CSS classes. | | string |
onTabClick | | (id: string, event: MouseEvent<HTMLAnchorElement |HTMLButtonElement, MouseEvent>) => void | |
type | The type handles what direction the tabs will be rendered in. | 'horizontal' | 'horizontal' |'vertical' |
Tabs
core package4.0.1
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Tabs are used for organizing information by showing one section while hiding other related sections at the same time.
Usage
Tabs can be rendered as one of two types: horizontal and vertical. The Tabs component expects a list of tab props, where each tab can define its own href, name, and an id that is used to send back when a user interacts with the tab via the onTabClick callback function. The currentTabId prop indicates which tab is currently active, and applies special styling to it.
Individual Tabs may be marked as disabled, as well as contain errors.
Examples
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Count
Tabs may also contain a Count badge if provided with a number for the tab's count attribute.
Examples
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content