Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tabs

v.1.0.0 | Saturn
Healthy
StorybookFigma

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Container tab selected
Required
width
Fixed -
height
Fluid (content).

2

Border
Required
border top: 2px solid. Applies to the selected tab.

3

Selected label
Required
Describes the action that will occur if a user taps a tab.

4

Container tab unselected
width
Fluid (100% bounded by parent element) -
height
Fluid (content).

5

Unselected label
Describes the action that will occur if a user taps a tab.

States

Selected

  • A color line communicates the tab selected.

    • Unselected

  • Blue background communicates the tab is not selected.

    • Keyboard focus - Selected

  • A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.

  • A color line communicates the tab selected.

    • Keyboard focus - Unselected

  • A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.

  • A grey line communicates the tab unselected.

    • Behaviour

    Size

  • The tab is bounded by parent element. So if there is only one tab, it will occupy 100% of the element containing it. It there are two, for example, they will occupy 1/2 of 100%.

    • How text grows

  • It is recommended that the text on the tabs occupy no more than a single line, but they can use a second line if necessary, with truncated text.

  • If one tab has more content than the others, the rest of the tabs will increase their height to maintain the same proportions.

    • Navigate between tabs

  • Users can navigate between tabs by clicking or tapping a tab.

    • Mobile

    Horizontal scroll

  • Only mobile. When the content exceeds the width of the screen it will generate a horizontal scroll. at a resolution of 320px, two 140px tabs will be displayed.

  • Arrows must be applied to make tabs accesible.

    • Do's and dont's

    Foo

    Do’s

    It is recommended that the text on the tabs occupy no more than a single line, but they can use a second line if necessary, with truncated text.

    Foo

    Don’t

    The text in the tabs cannot be longer than two lines. If necessary, the text can be truncated.

    Foo

    Do’s

    If one tab has more content than the others, the rest of the tabs will increase their height to maintain the same proportions.

    Foo

    Don’t

    If one tab has more content than the others, the rest of the tabs cannot have a fixed height.

    Foo

    Don’t

    Use too many tabs.

    TabsUsage
    TabsCode API