Standard
Button:
A standard button
States
Hover
Changes when a user moves their cursor over it
Down
Changes when pressed using touch or mouse events
Active
Changes to show it is currently the selected user action
Disabled
Changes to show it is currently unable to be interacted with
Loading
Can show a loading indicator:
Success
Can alert to a succesful action:
Error
Can alert user of an error:
All together:
Variations
Sizes
Can have different sizes:
Colors
Can have different colors:
Feedback
Can be positive or negative:
Fluid
Can fit parent container:
Bubbly
Can be bubbly:
Icon
Can be formatted as an icon toolbar:
Vertically Attached
Can be attached to the top or bottom of other content
Horizontally Attached
Can be attached to the left or right of other content
Form Attached
Can be attached to an input field
Group
Buttons
Can exist together as groups
Conditionals
Groups can be separated by conditionals
Plural Variations
Singular variations can be applied to groups to infer all elements share the same quality
Icon
Groups can be formatted as icon toolbars
Fluid
Groups can be divided evenly to fit parent
Colors
Groups can have a shared color
Sizes
Groups can have a shared size