Live Demo
Anatomy
A button contains a call to action, container and can also include an icon sometimes.
Primary Button
- Text label
- Container
- Icon (optional)
Outlined button
- Text label
- Container
- Icon (optional)
Ghost button
- Text label
- Icon (optional)
Icon button
- Container (optional)
- Icon
Layout and spacing
- Item spacing: 8
- Padding top: 8
- Padding bottom: 8
- Padding left: 16
- Padding right: 16
States
- Default
- Hover
- Active
- Disabled
Size and Shape
- Buttons can be displayed in Small,Medium and Large sizes..
- By default, the width of a button should be defined by the length of the text.
- Alternatively, a button can be set to a custom fixed width in order to maintain a consistent look across a page design.
- Buttons can be built with a square or circle shape. The square shape maintains 3 pixel rounded corners.
Guidelines
Choose a button size that's easily tappable, not too dominant
Choose clear and action-oriented button labels that directly express the main purpose.
Establish a clear hierarchy for buttons based on their importance and actions
Same view must not have more than one primary button.