Atomic Bulldog - UI/pattern library

1.5 - Buttons

Source: atoms/_btn.scss, line 125

Open in new window

Examples:

Default styling
.is-primary

Primary color

.is-secondary

Secondary color

.is-link

Link color

.is-success

Success color

.is-danger

Danger color

.is-warning

warning color

.is-light

light color

.is-dark

dark color

<button class="btn [modifier]">.btn .[modifier]</button>
<button class="btn [modifier] is-outlined">.btn .[modifier] .is-outlined</button>
<button class="btn [modifier] is-hovered">.btn .[modifier] .is-hover</button>
<button class="btn [modifier] is-focused">.btn .[modifier] .is-focused</button>
<button class="btn [modifier] is-rounded">.btn .[modifier] .is-rounded</button>
<button class="btn [modifier] is-loading">.btn .[modifier] .is-loading</button>
<button class="btn [modifier]" disabled>.btn .[modifier] disabled</button>
<button class="btn [modifier] is-theme-default">.btn .[modifier] .is-theme-default</button>