Tab

View Source

Tab 1

render(
  <StackView
    axis="horizontal"
    paddingHorizontal={1}
    paddingTop={1}
    spacing={1}
    backgroundColor="primary-light"
  >
    <Tab active>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab disabled>Tab 3</Tab>
    <Tab>Tab 4</Tab>
  </StackView>
)

render(
  <StackView
    axis="horizontal"
    paddingHorizontal={1}
    paddingTop={1}
    spacing={1}
    backgroundColor="primary-light"
  >
    <Tab active>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab disabled>Tab 3</Tab>
    <Tab>Tab 4</Tab>
  </StackView>
)

Props

Accepts Text props.

activeboolean

Whether or not the tab is active. Sets element to span and removes href and hover effects if true.

colorColorProp

The background color of the tab.

disabledboolean

Whether or not the tab is disabled.

hrefstring

Link to URL. Sets element to an anchor, otherwise it will use a button.

size'xs' | 'sm' | 'md' | 'lg'

The size of the tab which includes fontSize, lineHeight and padding.

Props

PreviousSummary NextTabs