Buttons

The button element in Undernet is unique in similar fashion to the typography. All states are controllable via the sass-maps, $button-base-states and $button-types. You can also customize button sizes via $button-sizes.

These maps output their keys and values as css properties. This means you can add any property: value normally found in CSS into these maps.

Base Button

Customize the base, hover, active, and focus states of the base button.

Button styling can be added to inputs, anchors and buttons with or without the button class.

Button Tag Anchor Tag

<button>Button Tag</button>
<a class="button">Anchor Tag</a>
<input type="button" value="Input Tag" />

All button input “types” will receive styling, even without the button class.

Block button

Using is-wide as a modifier class, your buttons stretch full-width in their container.

Button Tag Anchor Tag

<button class="is-wide">Button Tag</button>
<a class="button is-wide">Anchor Tag</a>
<input class="is-wide" type="button" value="Input Tag" />

Button Sizes

Defined in $button-sizes is a list of keys (classes) mapped to padding and font-sizes to modify your buttons. Remove, edit, or add extra sizes to fit your needs.

Huge Large Medium Small

<button class="is-xl">Huge</button>
<button class="is-lg">Large</button>
<button class="is-md">Medium</button>
<button class="is-sm">Small</button>

Custom Button Types

Create custom buttons easily in the $button-types sass-map. Like in the $button-base-states map, the states included are hover, active, and focus.

Primary Secondary Tertiary

<button class="is-primary">Primary</button>
<button class="is-secondary">Secondary</button>
<button class="is-tertiary">Tertiary</button>
<button class="is-inverted">Inverted</button>
<button class="is-inverted-outline">Inverted Outline</button>

Status Buttons

Also in the same map as $button-types, you can find status buttons. By default, there are four: success, notice, destroy, and warning.

Success Notice Warning Destroy

<button class="is-success">Success</button>
<button class="is-notice">Notice</button>
<button class="is-warning">Warning</button>
<button class="is-destroy">Destroy</button>

Disabled Buttons

Show a button is disabled using the disabled attribute or is-disabled class. Also works on inputs, as well as a tags using the button class.

Disabled Attribute Disabled Class

<button disabled>Disabled Attribute</button> <button class="is-disabled">Disabled Class</button>

Links

Control the look and feel of your links as well. They don’t require any modifier classes.

Just a link!

<a href="#">Just a link!</a>

Is there information missing? Edit this page on Github!