Tabs
Updated:
March 29, 2020
Tabs is a navigation component you can stack horizontal. It is used to navigate between several pages.
Variations
No items found.
Component building blocks
The next steps explains how tabs are built up and styled.
Anatomy
Tabs is built up by a container that contain both a label and icon.
Component elements
1
Container
2
Stepper Container
3
Label
Colors and styles
Tabs are displayed in the unselected state.
Element
Color / Style name
1
Container
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
4
Stepper Container
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.
4
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.
4
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
This is some text inside of a div block.
This is some text inside of a div block.
2
Border
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.
4
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
Specs
This component is built up by a oval slider and icons.
1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes
States
Tabs have two states, the main state is unselected.
Normal tabs
Component state
Element
Style
Disabled
Unselected
style-indent-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Enabled
Selected tabs
style-normal-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
