BumblebeeBumblebee

Tabs

Contents

Live demoDesignCode

Live demo

Tabs as navlinks

Tabs as buttons

Design

Usage

Tabs should be used in conjunction with cards to give the user multiple views.

Tabs should ideally be applied to information within a card that can be split evenly and easily digestible, for example multiple tables for one entity.

Write short tab labels and use plain language. Tab labels should usually be 1–2 words. Short labels are more scannable; if you need longer labels, it’s a sign that the choices are too complicated for a tab control.

Anatomy

Tabs consist of two or more text links with a visual indicator of which tab is currently selected.

To maintain an uncluttered UI no more than 6 tabs should be used together.

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Behaviour

Tabs can be clicked, tapped and selected by tabbing on a keyboard. Typically the first tab will be selected by default.

If the user navigates back using the breadcrumb, the previously selected tab should be selected. i.e. if I navigate forward from Tab 2, then it should be selected if I reverse my navigation.

If the users refreshes the page the current selected tab should remain selected. (Eg through query params).

States

See the different states of the nav buttons below
  • Idle Text - neutral-500 Fill -neutral-000 Stroke - none Highlight - neutral-100
  • Hover Text - neutral-500 Fill - neutral-100 Stroke - none Highlight - neutral-100
  • Focus Text - neutral-500 Fill - neutral-000 Stroke - primary-400 Highlight - neutral-100
  • Selected Text - neutral-500 Fill - neutral-000 Stroke - none Highlight - primary-500
  • Disabled Text - neutral-250 Fill - neutral-000 Stroke - none Highlight - neutral-100

Spacing

  • Spacing between tabs: base-positive-02
  • Spacing between tab text and highlight: base-negative-06
  • The length of the content will determine the size of the tab

Code

import { Tabs } from '@shieldpay/bumblebee/tabs';

  <Tabs>
      <Tabs.Item to="/components/tabs/1">Tab one</Tabs.Item>
      <Tabs.Item to="/components/tabs/2">
        The long title of tab two
      </Tabs.Item>
      <Tabs.Item to="/components/tabs/3">The third tab</Tabs.Item>
      <Tabs.Item to="/" disabled>
        A disabled tab
      </Tabs.Item>
    </Tabs>

    <Tabs>
      <Tabs.Item id="tab-1" onClick={handleClick} selectedTab={selectedTab}>
        Tab one
      </Tabs.Item>
      <Tabs.Item id="tab-2" onClick={handleClick} selectedTab={selectedTab}>
        The long title of tab two
      </Tabs.Item>
      <Tabs.Item id="tab-3" onClick={handleClick} selectedTab={selectedTab}>
        The third tab
      </Tabs.Item>
      <Tabs.Item
        disabled
        id="tab-4"
        onClick={handleClick}
        selectedTab={selectedTab}
      >
        A disabled tab
      </Tabs.Item>
    </Tabs>
</Tabs>