Types
Button
A standard button
Animated
A button can animate to show hidden content
Icon
A button can have only an icon
Labeled Icon
A button can have an icon and a label
Groups
Buttons
Buttons can exist together as a group
Icons
Button groups can show groups of icons
Conditionals
Button groups can be separated by conditionals
States
Hover
A button can change to show a user has hovered their mouse
Down
A button can change when pressed using touch or mouse events
Active
A button can show it is currently the active user selection
Disabled
A button can show it is currently unable to be interacted with
Loading
A button can show a loading indicator
Variations
Social
A button can be formatted to link to a social website
Sizes
A button can have different sizes:
Ordinality
A button can be formatted to show different levels of emphasis
Basic
A basic button removes all unnecessary formatting
Toggle
A button can be formatted to toggle on and off
Feedback
A button can be positive or negative:
Fluid
A button can fit parent container:
Circular
A button can be circular:
Vertically Attached
A button can be attached to the top or bottom of other content
Horizontally Attached
A button can be attached to the left or right of other content
Group Variations
Vertical
Groups can be formatted to appear vertically
Icon
Groups can be formatted as icons
Labeled Icon
Groups can be formatted as labeled icons
Fluid
Groups can be divided evenly to fit parent
Colors
Groups can have a shared color
Basic
A button group can be formatted to remove extra formatting
Sizes
Groups can have a shared size