grommet
components

Tabs

a container with controls to show one tab at a time

One
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

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.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

plain

Whether this is a plain tab with no style.
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"
    }
  },
  "hover": {
    "color": {
      "dark": "white",
      "light": "black"
    }
  }
}

tab.color

text color for the Tab.
"control"

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