Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tabs

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the Tabs component is PRIMARY_TABS_STYLES.

You can not change the name of the object of tokens.

There is one prop that allows to modify different aspects of the component:

  • Variant: modify the styles of the Tabs.

Variants

Variants can modify the styles for the Tabs. The tokens used are:

12345678910
const PRIMARY_TABS_STYLES {
  [VARIANT]: {
    tabContainer?: {
      ...CommonStyleType,
      [DEVICE_BREAKPOINT]?: {
        focusWithin?: CommonStyleType,
        focus?: CommonStyleType,
        focusVisible?: CommonStyleType,
      },
    },

Additionally, there are states to modify each Tab individually. The internal states are:

12345
enum TabsStateTypes {
  SELECTED,
  UNSELECTED,
  EMPTY,
}

And the internal state tokens are:

123456789
  const PRIMARY_TABS_STYLES = {
    [VARIANT]: {
      ...restTokens,
      [PRIMARY_TABS_STATE]?: {
        label?: TypographyTypes,
        tabButton?: CommonStyleType,
      },
    }
  }

Example

Tabs theme object example:

12345678910
const PRIMARY_TABS_STYLES = {
  [VARIANT]: {
    tabContainer?: {
      ...CommonStyleType,
      [DEVICE_BREAKPOINT]?: {
        focusWithin?: CommonStyleType,
        focus?: CommonStyleType,
        focusVisible?: CommonStyleType,
      },
    },
TabsCode API
TabsAccessibility