ボタン

.kit-button クラスでスタイルされたボタンやリンクを作成します。

基本的な使い方

リンクボタン

<button class="kit-button">デフォルト</button>
<a href="#" class="kit-button">リンクボタン</a>

Altバリアント（アウトライン）

.-alt でアウトラインスタイルのボタンになります。

<button class="kit-button -alt">Altボタン</button>
<button class="kit-button -alt -primary">プライマリAlt</button>
<button class="kit-button -alt -danger">デンジャーAlt</button>

フラットバリアント

.-flat でボーダーレスなミニマルボタンになります。

<button class="kit-button -flat">フラットボタン</button>

セマンティックカラー

<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>

色名カラー

<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>

サイズ

<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>

角丸

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

無効状態

<button class="kit-button -primary" disabled>無効</button>
<button class="kit-button -disabled">無効クラス</button>

ボタングループ

<div class="kit-buttongroup">
  <button class="kit-button">左</button>
  <button class="kit-button">中央</button>
  <button class="kit-button">右</button>
</div>