OpenGov Visual Interface Documentation

Buttons

Buttons

Use .ui-button on any element to create a styled button, or use the <button> element (with the HTML class). For primary actions, use .ui-button.primary.

:hover

Hover state

:active

Active state

:disabled

Disabled

:focus

Focus

.primary

Primary

.primary:hover

Primary hover state

.primary:active

Primary active state

.primary:disabled

Primary disabled state

.positive

Positive

.positive:hover

Positive hover state

.positive:active

Positive active state

.positive:disabled

Positive disabled state

.negative

Negative

.negative:hover

Negative hover state

.negative:active

Negative active state

.negative:disabled

Negative disabled state

.ghost

Starts looking like a link, becomes a button on hover

.small

Small

.no-color

You guessed it, it's gray

.ui-button.block

Full width, block button 
<button class="ui-button [modifier class]">button.ui-button</button>

Button loading state

When a user clicks on a button and there is a state of loading, add a span with .ui-button_loading before the button text and it's also generally a good idea to change the text on the button to the present tense.

:disabled

Disabled

.primary

Primary

.primary:disabled

Primary disabled state

.negative

Negative

.negative:disabled

Negaive disabled state

.ghost

Starts looking like a link, becomes a button on hover

.small

Small

.tiny

Tiny 
<button class="ui-button [modifier class]">
  <span class="ui-loading_button"></span>
  Saving...
</button>

Pills

Tylenol

.small

Small
Tylenol

.tiny

Tiny
Tylenol 
<a class="ui-button pill icon-filter-1 [modifier class]">
  Tylenol
</a>
<button class="ui-button pill icon-graphtype-line-1 [modifier class]">
  Asprin
</button>

Button group

A button group is a series of buttons laid out next to each other. The parent element should be .button-group with child .ui-buttons (could be <button class="ui-button">). Button groups should be used for a series of items that are toggle-able (ie, only one button will be "selected" at a time, like a series of radio buttons).

One Two Three Four Five 
<div class="ui-button-group">
  <a class="ui-button">One</a>
  <a class="ui-button">Two</a>
  <a class="ui-button is-selected">Three</a>
  <a class="ui-button">Four</a>
  <a class="ui-button">Five</a>
</div>

Button stack

Vertical button group

One Two Three Four 
<div class="ui-button-stack">
  <a class="ui-button is-selected">One</a>
  <a class="ui-button">Two</a>
  <a class="ui-button">Three</a>
  <a class="ui-button">Four</a>
</div>