Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
"a user friendly label for screen readers"
Active tab index. If specified, Tabs will be a controlled component. This means that future tab changes will not work unless you subscribe to onActive function and update activeIndex accordingly.
0
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
"start"
"center"
"end"
"stretch"
The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
"xsmall"
"small"
"medium"
"large"
"xlarge"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
Custom messages for Tabs. Used for accessibility by screen readers.
{"tabContents": "Tab Contents"}
The size of the border.
{
"xsmall": "1px",
"small": "2px",
"medium": "4px",
"large": "12px",
"xlarge": "24px"
}
The color of tabs border.
{
"dark": "rgba(255,255,255,0.33)",
"light": "rgba(0,0,0,0.33)"
}
Tab
one tab within tabs
Whether an icon and label should be reversed so that the icon is at the end of the tab.
truefalse
border styles of the tab
{
"side": "bottom",
"size": "small",
"color": {
"dark": "accent-1",
"light": "brand"
},
"active": {
"color": {
"dark": "white",
"light": "black"
}
},
"disabled": {},
"hover": {
"color": {
"dark": "white",
"light": "black"
}
}
}
border color of the Tab when disabled
string | {dark: string, light: string}