Button

The .kit-button class creates styled buttons and links.

Basic Usage

Link Button

<button class="kit-button">Default</button>
<a href="#" class="kit-button">Link Button</a>

Alt variant (Outline)

Use .-alt for an outlined button style.

<button class="kit-button -alt">Alt Button</button>
<button class="kit-button -alt -primary">Primary Alt</button>
<button class="kit-button -alt -danger">Danger Alt</button>

Flat variant

Use .-flat for a minimal, borderless button.

<button class="kit-button -flat">Flat Button</button>

Semantic colors

<button class="kit-button -primary">Primary</button>
<button class="kit-button -secondary">Secondary</button>
<button class="kit-button -success">Success</button>
<button class="kit-button -warning">Warning</button>
<button class="kit-button -danger">Danger</button>
<button class="kit-button -info">Info</button>

Named colors

<button class="kit-button -orange">Orange</button>
<button class="kit-button -dodgerblue">Dodgerblue</button>
<button class="kit-button -deeppink">Deeppink</button>
<button class="kit-button -limegreen">Limegreen</button>
<button class="kit-button -crimson">Crimson</button>
<button class="kit-button -green">Green</button>
<button class="kit-button -silver">Silver</button>
<button class="kit-button -black">Black</button>

Sizes

<button class="kit-button -xsmall">XSmall</button>
<button class="kit-button -small">Small</button>
<button class="kit-button -medium">Medium</button>
<button class="kit-button -large">Large</button>
<button class="kit-button -xlarge">XLarge</button>
<button class="kit-button -xxlarge">XXLarge</button>

Rounded

<button class="kit-button -rounded -primary">Rounded</button>
<button class="kit-button -alt -rounded -danger">Rounded Alt</button>

Disabled

<button class="kit-button -primary" disabled>Disabled</button>
<button class="kit-button -disabled">Disabled class</button>

Button group

<div class="kit-buttongroup">
  <button class="kit-button">Left</button>
  <button class="kit-button">Center</button>
  <button class="kit-button">Right</button>
</div>