ComponentsTabs
Version 0.10.0

Tabs

A component for toggling between related panels on the same page.

Content for Tab 1

Usage#

import { Tabs, TabList, Tab, TabPanel } from '@backstage/ui';

<Tabs>
  <TabList>
    <Tab id="tab1">Tab 1</Tab>
    <Tab id="tab2">Tab 2</Tab>
  </TabList>
  <TabPanel id="tab1">Content 1</TabPanel>
  <TabPanel id="tab2">Content 2</TabPanel>
</Tabs>

API reference#

Tabs#

Groups the tabs and the corresponding panels. Renders a <div> element.

PropTypeDefaultResponsive
orientation
horizontalvertical
horizontalNo
selectedKey
string
-No
defaultSelectedKey
string
-No
onSelectionChange
(key: Key) => void
-No
isDisabled
boolean
falseNo
disabledKeys
Iterable<Key>
-No
children
ReactNode
-No
className
string
-No
style
CSSProperties
-No

Tab#

An individual interactive tab button that toggles the corresponding panel. Renders a <button> element.

PropTypeDefaultResponsive
id
string
-No
isDisabled
boolean
falseNo
children
ReactNode
-No
className
string
-No
style
CSSProperties
-No

Examples#

Default Selected Key#

Here's how to set which tab is selected by default.

Content for Tab 2
<Tabs defaultSelectedKey="tab2">
  <TabList>
    <Tab id="tab1">Tab 1</Tab>
    <Tab id="tab2">Tab 2</Tab>
    <Tab id="tab3">Tab 3</Tab>
  </TabList>
  <TabPanel id="tab1">Content 1</TabPanel>
  <TabPanel id="tab2">Content 2</TabPanel>
  <TabPanel id="tab3">Content 3</TabPanel>
</Tabs>

Disabled Tabs#

Here's how to disable specific tabs.

Content for Tab 1
<Tabs>
  <TabList>
    <Tab id="tab1">Tab 1</Tab>
    <Tab id="tab2" isDisabled>Tab 2 (Disabled)</Tab>
    <Tab id="tab3">Tab 3</Tab>
  </TabList>
  <TabPanel id="tab1">Content 1</TabPanel>
  <TabPanel id="tab2">Content 2</TabPanel>
  <TabPanel id="tab3">Content 3</TabPanel>
</Tabs>

Orientation#

Here's how to display tabs vertically.

Content for Tab 1
<Tabs orientation="vertical">
  <TabList>
    <Tab id="tab1">Tab 1</Tab>
    <Tab id="tab2">Tab 2</Tab>
    <Tab id="tab3">Tab 3</Tab>
  </TabList>
  <TabPanel id="tab1">Content 1</TabPanel>
  <TabPanel id="tab2">Content 2</TabPanel>
  <TabPanel id="tab3">Content 3</TabPanel>
</Tabs>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

  • bui-Tabs
  • bui-TabList
  • bui-TabListWrapper
  • bui-Tab
  • bui-TabActive
  • bui-TabHovered
  • bui-TabPanel

Changelog#

  • 0.9.0 - BREAKING: Changed className prop behavior to augment default styles instead of being ignored or overriding them.

Affected components:

  • Menu, MenuListBox, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBoxItem, MenuSection, MenuSeparator
  • Switch
  • Skeleton
  • FieldLabel
  • Header, HeaderToolbar
  • HeaderPage
  • Tabs, TabList, Tab, TabPanel

If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes. #31496

  • 0.8.0 - remove default selection of tab #31216
  • 0.8.0 - Making href mandatory in tabs that are part of a Header component #31343
  • 0.8.0 - Remove auto selection of tabs for tabs that all have href defined #31281
  • 0.7.2 - Making href mandatory in tabs that are part of a Header component #31343
  • 0.7.2 - Remove auto selection of tabs for tabs that all have href defined #31281
  • 0.7.2 - remove default selection of tab #31216
  • 0.4.0 - New Tabs component #29996