voog.design

Buttons

Voog buttons

Voog provides a constrained, purposeful set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used.

Action button

Meggings cred before they sold out messenger bag, ugh fashion axe Pitchfork.

WEBC 2.0

Medium size button.

WEBC 2.0.1

Hover state

WEBC 2.0.2

Pressed state

WEBC 2.0.3

Saving state

WEBC 2.0.4

Disabled state

WEBC 2.0.5

Saved state

Alternative button

Meggings cred before they sold out messenger bag, ugh fashion axe Pitchfork.

WEBC 2.1

Medium size button.

WEBC 2.1.1

Hover state

WEBC 2.1.2

Pressed state

WEBC 2.1.3

Disabled state

Small action button

Meggings cred before they sold out messenger bag, ugh fashion axe Pitchfork.

WEBC 2.2

Small action button.

Small alternative button

Meggings cred before they sold out messenger bag, ugh fashion axe Pitchfork.

WEBC 2.3

Small alternative button.

Button group

Meggings cred before they sold out messenger bag, ugh fashion axe Pitchfork.

WEBC 2.4

Save & cancel button group example.

Option button

Meggings cred before they sold out messenger bag, ugh fashion axe Pitchfork.

  • Option 1

  • Option 2

  • Option 3

  • Option 4

WEBC 2.7

Default select button.