Buttons

On this page

# Intro

Buttons are classless by default.

<button>Button</button>
<input type="button" value="Input">
<input type="reset">
<input type="submit">

The button class can be added to the following elements:

  • <a> anchor links
  • <button> buttons
  • <label> labels
  • <input type="button"> button inputs
  • <input type="reset"> reset inputs
  • <input type="submit"> submit inputs
Anchor
<a href="" class="button">Anchor</a>
<button class="button">Button</button>
<label class="button" tabindex="0">Label</label>
<input type="button" class="button" value="Input">
<input type="reset" class="button">
<input type="submit" class="button">

# Colors

The button class has color modifiers available with -primary, -success, -warning, -danger, -dark, and -light.

<button class="-primary">Primary</button>

# Disabled

Buttons can be disabled. Just add the disabled attribute.

<button disabled>Button</button>

# Sizing

Buttons can be sized using the -small, -normal, -medium, and -large modifiers.

<button class="-small">Small</button>

The -block modifier can be added to create block level buttons that span the full width of the parent.

<button class="-block">Block</button>

# Shape

You can change the shape of buttons by using the border radius utility.

<button class="--rectangle">Button</button>

# Outline

Buttons can be outlined using the -outline modifier. Backgrounds will be transparent. The -light modifier should only be used in the dark theme or inside darker elements.

<button class="-outline">Button</button>
<button class="-primary -outline">Primary</button>

# Icons

Buttons are icon agnostic and will work with any icon fonts or SVGs. Icons are not included, but featured below are buttons with Line Icons.

<button><i class="lni lni-heart"></i> Button</button>

# Groups

You can group together buttons by wrapping them in a buttons container. Buttons in groups will have their left and right margins removed.

<div class="buttons">
	<button class="button">Button</button>
	<button class="button">Button</button>
</div>
<div class="buttons">
	<button class="button -primary --rounded-left-full">Button</button>
	<button class="button -primary --rounded-right-full">Button</button>
</div>