Matchbox

Tabs

Use this component to switch views within the same page context.

Usage

Examples

<Tabs
  selected={1}
  tabs={[
    { content: "Details" },
    { content: "Sending Domains" },
    { content: "Api Keys" },
    { content: "Permissions" },
  ]}
/>;

<Tabs
  selected={1}
  tabs={[
    { content: "Details" },
    { content: "Sending Domains" },
    { content: "Api Keys" },
    { content: "Permissions" },
  ]}
/>;

System Props

margin

borderBottom

Learn More

Tabs API

disableResponsiveBehavior

bool

Not recommended - Disables truncating tabs that overflow into a popover menu

fitted

bool

Fits the tabs to span the full width of the container

onSelect

function

Callback when a tab is selected. Returns array index.

tabs

array

Tabs content. Objects of Button and UnstyledLink props work here.

selected

number

Required

Index of the selected tab