Tab

View on GitHub

Introduction

Evergreen exports the following components to build tabbed navigation.

  • Tab: the base horizontal tab component.
  • SidebarTab: a vertical tab component used in sidebars.
  • Tablist: a accessibility helper component used when tabs toggle panels on the page.
  • TabNavigation: a accessibility helper component used when tabs are links.

Presentational examples

Default tab
<Tab>Default tab</Tab>
code Hide code
Selected
<Tab isSelected>Selected</Tab>
code Hide code
Select handler
<Tab onSelect={() => alert('selected!')}>Select handler</Tab>
code Hide code

Accessibility

The Tab component should be wrapped in a Tablist or TabNavigation component to comply to WAI-ARIA accessibility standards.

If you are not using a link (a tag) for your Tab, make sure to wrap in a Tablist, see examples below.

TraitsEvent HistoryIdentities

Panel Traits

Tab Link usage

If you are using a link (a tag), make sure to wrap your tabs in a TabNavigation component.

<TabNavigation>
  {['Traits', 'Event History', 'Identities'].map((tab, index) => (
    <Tab key={tab} is="a" href="#" id={tab} isSelected={index === 0}>
      {tab}
    </Tab>
  ))}
</TabNavigation>
code Hide code

Tab Props

This component composes ../typography

onSelectfunc = () => {}
Function triggered when tab is selected.
isSelectedbool
When true, the tab is selected.
appearancestring
The appearance of the tab. The default theme only comes with a default style.
themeobjectrequired
Theme provided by ThemeProvider.
onKeyPress = () => {}
is = 'span'
height = 28

Sidebar tabs

TraitsEvent HistoryIdentities

Panel Traits

Sidebar tab Link usage

If you are using a link (a tag), make sure to wrap your tabs in a TabNavigation component.

<TabNavigation marginX={-4} marginBottom={16}>
  {['Traits', 'Event History', 'Identities'].map((tab, index) => (
    <SidebarTab
      key={tab}
      is="a"
      href="#"
      id={tab}
      isSelected={index === 0}
    >
      {tab}
    </SidebarTab>
  ))}
</TabNavigation>
code Hide code

SidebarTab Props

This component composes Tab

height = 32

TabNavigation Props

This component composes ui-box

Tablist Props

This component composes ui-box