The button element in Undernet is unique in similar fashion to the typography. All states are controllable via the sass-maps,
$button-types. You can also customize button sizes via
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.
Customize the base,
focus states of the base button.
Button styling can be added to inputs, anchors and buttons with or without the
<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
is-wide as a modifier class, your buttons stretch full-width in their container.
<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 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.
<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
<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>
Also in the same map as
$button-types, you can find status buttons. By default, there are four:
<button class="is-success">Success</button> <button class="is-notice">Notice</button> <button class="is-warning">Warning</button> <button class="is-destroy">Destroy</button>
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 disabled>Disabled Attribute</button> <button class="is-disabled">Disabled Class</button>
Control the look and feel of your links as well. They don’t require any modifier classes.
<a href="#">Just a link!</a>
Is there information missing? Edit this page on Github!