Tabs
import { Tabs } from '@enmovil/ui-design-system';
Tab navigation built from an items list, where each tab can show a count badge next to its label. Set the tab that opens first with defaultActiveKey.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
defaultActiveKey | string | Yes | — | — | key of the tab that is open when the component first renders. |
items | TabItems[] | Yes | — | — | Tabs to show, in order, each with a label and content. |
tabPanePadding | string | number | No | 16 | — | Padding around each tab's content, as a number of pixels or a CSS value. Defaults to 16. |
items
An array of objects (TabItems). Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
key | string | Yes | Identifies the tab and must be unique. Used by defaultActiveKey and reported by onChange. |
label | string | Yes | Text of the tab. |
children | React.ReactNode | Yes | Content shown when the tab is open, wrapped in tabPanePadding. |
count | number | No | Number shown in a badge next to the label. No badge is shown when it is absent or 0. |
Other attributes
Tabs passes 301 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | ((activeKey: string) => void) | Fires when a different tab becomes active. |
onTabClick | ((activeKey: string, e: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void) | Fires on every tab click, including the already-active tab. |
Children
Tabs does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default Tabs example.
Loading playground…
Storybook
Open Tabs in Storybook to try every story with the full set of controls.