grommet
components

Tabs

a container with controls to show one tab at a time

Storybook
CodeSandbox

Props

a11yTitle

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"

activeIndex

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

alignControls

How to align the tab controls within the tabs header.
"start""center""end""stretch"

alignSelf

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"

children

Array of Tab.
"node"

flex

Whether flex-grow and/or flex-shrink is true.
"grow""shrink"truefalse

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

justify

How to align the tabs along the main axis.
"start""center""end"

margin

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": "..."
}

messages

Custom messages for Tabs. Used for accessibility by screen readers.
{"tabContents": "Tab Contents"}

onActive

Function that will be called with the active tab index when the currently active tab changes.

(1) => {}

Theme

global.borderSize

The size of the border.
{
  "xsmall": "1px",
  "small": "2px",
  "medium": "4px",
  "large": "12px",
  "xlarge": "24px"
}

global.colors.border

The color of tabs border.
{
  "dark": "rgba(255,255,255,0.33)",
  "light": "rgba(0,0,0,0.33)"
}

global.edgeSize.small

The possible sizes for margin, pad and gap.
"12px"

tabs.background

background styling of Tabs.
string | object

tabs.extend

Any additional style for Tabs.
"any CSS"
(props) => {}

tabs.gap

The gap size between the Tabs.
string

tabs.header.background

The background styles of Tabs header.
string | { dark: string, light: string }

tabs.header.border.color

border color of the tabs controls
string | { dark: string, light: string }

tabs.header.border.side

side of the border of the tabs controls
string

tabs.header.border.size

border size of the tabs controls
string

tabs.header.border.style

border style of the tabs controls
string

tabs.header.extend

Any additional style for Tabs header.
"any CSS"
(props) => {}

tabs.panel.extend

Any additional style for Tabs panel.
"any CSS"
(props) => {}

Tab

one tab within tabs

Props

disabled

Whether the tab is disabled.
truefalse

icon

Icon element to place in the tab.
"element"

plain

Whether this is a plain tab with no style.
truefalse

reverse

Whether an icon and label should be reversed so that the icon is at the end of the tab.

truefalse

title

The title of the tab.
"Tab Title"
<Box>...</Box>

Theme

tab.active

styles for the active tab.
{"color": "text"}

tab.background

background styling of Tab.
object

tab.border

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"
    }
  }
}

tab.border.disabled.color

border color of the Tab when disabled
string | {dark: string, light: string}

tab.color

text color for the Tab.
"control"

tab.disabled.color

text color of the Tab when disabled.
string | {dark: string, light: string}

tab.extend

Any additional style for Tab.
"any CSS"
(props) => {}

tab.hover.background

background style of the Tab on hover.
string | object

tab.hover.color

text color of the tab on hover.
{"dark": "white", "light": "black"}

tab.hover.extend

Any additional style for Tab hover.
"any CSS"
(props) => {}

tab.margin

The margin of Tab.
{
  "vertical": "xxsmall",
  "horizontal": "small"
}

tab.pad

The pad of Tab.
{"bottom": "xsmall"}