Basic usage / default Tabs
Stretched / Fitted Tabs
Custom styles
It is possible to override the styles for Tabs with a combination of system props and _active / _hover styling. Note: active is not
the psuedo class for :active, but rather the active css system props to apply when a tab is "selected".
For now, the custom styling should target the nested Link (see example). In a future version, we will add a _styleOverride prop
Props
Tabs| Name | Type | Description |
gradient | ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>> | - |
keepMounted | boolean | - false |
TabPanels| Name | Type | Description |
gradient | ResponsiveValue<ReactText, Required<Theme<ReactText>>> | - |
keepMounted | boolean | - false |
Accessibility
- See a11y details here: https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
- There are 2 keyboard modes, manual (must hit
enterto activate) and auto (tab switches on focus).