Tabs may be used navigate between multiple URLs. Tabs are intended as page-level navigation - if you're looking at just switching panels please use SegmentedControl.

Props

Name
Type
Default
activeTabIndex
Required
number
-
onChange
Required
({| +event: SyntheticMouseEvent<> | SyntheticKeyboardEvent<>, +activeTabIndex: number, dangerouslyDisableOnNavigation: () => void |}) => void
-

If your app uses a tool such as react-router to navigate between pages, be sure to use onChange to navigate instead of getting a full page refresh with href

tabs
Required
Array<{| href: string, text: React.Node, id?: string, indicator?: "dot" | number, ref?: {| current: ?HTMLElement |} |}>
-
bgColor
"default" | "transparent"
"default"

If Tabs is displayed in a container with a colored background, use this prop to remove the white tab background. See the background color example to learn more.

wrap
boolean
-

By default, flex items will all try to fit onto one line. Use this prop to allow the items to wrap onto multiple lines, from top to bottom.

Usage guidelines

When to Use
  • To break up a large collection of content into logical, digestible views.
  • To switch between different, yet related views, such as Updates and Messages.
When Not to Use
  • When any UI or content above the Tabs is altered upon selection. Use Link instead.
  • To break up content that is not related to each other or is not on the same hierarchical level.

Example

Background color