Anatomy
Note: Image is not to scale
- Tab
- Selection indicator
- Icon (optional)
- Tab bar
Options
Selection
This option indicates whether a tab is selected (and thereby showing content) or not.
Alignment
This option determines whether the tabs are left or center aligned along the tab bar.
Density
This option determines the overall size of the component: compact, default, or loose.
Behavior
Hover
Hovering over an unselected tab causes a lighter selection bar to appear below.
Disabled
A disabled tab changes to color subtle.
Tab overflow
When there are more tabs than can be displayed, the behavior will match our secondary navigation. The tabs will be cut off and hidden on the far right and accessible via scrolling.
Guidance
Tab number
Use at least 2 tabs or more.
Text overflow
Avoid using long titles for tab copy. Thirty characters or less is our recommendation. If text does overflow, it is truncated with an ellipsis and the full text is shown in a tooltip on hover.
Icon placement
Don't put icons on the right.
Linking
Tabs should not link to another page.
Icons
When using icons, it is best to use them as a prefix to the label, rather than following the label. This ensures that the icon is properly associated with the label and is more easily recognizable by users.
Accessibility
Keyboard interactions
Using the left and right arrow keys will move focus between tabs. You can press enter to make that focused tab active.
API Reference
Tabs
| Prop | Description | Type | Default | Required |
|---|
TabsTrigger
| Prop | Description | Type | Default | Required |
|---|
TabsContent
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| value | string | ---- | True | |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS | ---- | False |
| forceMount | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | true | ---- | False |
| asChild | enum boolean | ---- | False |