Button

Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.

  • Standard
  • States
  • Variations
  • Group
  • 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
    Normal
    Hover
    Down
    Loading


    Disabled
    Active
    Toggled
    Error
    Success

    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

    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

    Search

    Buttons (Button Groups)

    Can exist together as groups

    One
    Two
    Three

    Groups can be vertical

    One
    Two
    Three

    Groups can be divided evenly to fit parent

    One
    Two
    Three

    Singular variations can be applied to groups to infer all elements share the same quality

    Blue

    One
    Two
    Three


    Large

    One
    Two
    Three