Button theme: default

Button theme: red

Button theme: blue

Button theme: green

Button theme: black

Button theme: default, small

Button theme: red, small

Button theme: blue, small

Button theme: green, small

Button theme: black, small


Buttons as <a> tags

Option 1 Option 2 Option 3 Option 4

The same works with small buttons, of course:

Option 1 Option 2 Option 3 Option 4


Buttons within <p> blocks

We assume that content within <p> blocks will be text'ish. Therefore we style base component (like <buttons>) with a default margin so that they fit within the text flow. Option 6 (as <a> tag) The same works with small buttons, of course: Option 6 (as <a> tag)


IconButton theme: default

Github
Google
Slack

Danger button theme: default


Slider

Progress

Progress - Animated

Progress - Intermediate


Input Fields


Legacy Buttons