Semantic UI Spec
Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.
Button
The standard button:
Button
States
Can be hovered:
Hovered Button
Can be pressed in:
Pressed Button
Can be active:
Active Button
Can be disabled:
Disabled Button
Can show a loading indicator:
Loading Button
Can alert to a succesful action:
Successful Button
Can alert user of an error:
Error Button
Standard Variations
Can have different sizes:
Mini
Tiny
Small
Medium
Big
Huge
Massive
Gigantic
Can have different colors:
Blue Button
Purple Button
Green Button
Can fit parent container:
Fits container
Buttons (Button Groups)
Can exist together as groups
Groups can be vertical
Groups can be divided evenly to fit parent
Singular variations can be applied to groups to infer all elements share the same quality
Blue
Large
Additional Variations
Can be formatted to fit just an icon or image:
Can be attached to the top or bottom of other content
Top
Bottom
Can be attached to an input field
States
Button States
Normal
Hover
Down
Loading
Disabled
Active
Toggled
Error
Success