Standard button
Updated:
April 27, 2021
Standard buttons indicates an instant action, preformed with a single click.
Variations
The standard button can be used in a normal, raised or suppressed version, each with an option to use icon in addition to the label.
No items found.
Component building blocks
How the standard button, with and without icon, are built up and styled.
Anatomy
The standard button is built up by a container and a textbox. The icon is optional.
Component elements
1
Container
2
Label
3
Stepper Container
Colors and styles
The button container, label and icon colors depends on wether it is a normal button or a raised button.
Element
Color / Style name
1
Container
style-normal
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
This is some text inside of a div block.
3
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
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
This is some text inside of a div block.
3
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
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
This is some text inside of a div block.
3
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
The look of the states are defined by the style.
Normal standard button
Component state
Element
Style
Enabled
Container
style-normal-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Hover
Container
style-normal-hover
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Container
style-normal-pressed
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Container
style-normal-focused
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Disabled
Container
style-raised-disabled
Label and icon
This is some text inside of a div block.
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body
Raised standard button
Component state
Element
Style
Enabled
Container
style-raised-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Hover
Container
style-raised-hover
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Container
style-normal-pressed
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Container
style-raised-focused
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Disabled
Container
style-raised-disabled
Label and Icon
This is some text inside of a div block.
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body
