Buttons

Standard buttons

To create a standard button, add the .c-btn class to any <a>, <button> or <input> element.

p
  a.c-btn href="#" Link button
  button.c-btn Button
  input.c-btn type="button" value="Input"
  input.c-btn type="submit" value="Submit"
p
  a.c-btn href="#" リンクボタン
  button.c-btn ボタン
  input.c-btn type="button" value="インプット"
  input.c-btn type="submit" value="サブミット"

<p>
  <a class="c-btn" href="#">Link button</a><button class="c-btn">Button</button><input class="c-btn" type="button" value="Input" /><input class="c-btn" type="submit" value="Submit" />
</p>
<p>
  <a class="c-btn" href="#">リンクボタン</a><button class="c-btn">ボタン</button><input class="c-btn" type="button" value="インプット" /><input class="c-btn" type="submit" value="サブミット" />
</p>

Variations

There are several variations for a button. Choose one in context.

Use .c-btn--primary for a primary action
Use .c-btn--secondary for a secondary action
Use .c-btn--aux for an auxiliary action.
Use .c-btn--emphasize for an emphasized action
Use .c-btn--critical for a critical action
Use .c-btn--transparent for a button which background is transparent

Primary Secondary Auxiliary Emphasize Critical Transparent

p
  a.c-btn--primary href="#" Primary
  a.c-btn--secondary href="#" Secondary
  a.c-btn--aux href="#" Auxiliary
  a.c-btn--emphasize href="#" Emphasize
  a.c-btn--critical href="#" Critical
  a.c-btn--transparent href="#" Transparent

p
  button.c-btn--primary Primary
  button.c-btn--secondary Secondary
  button.c-btn--aux Auxiliary
  button.c-btn--emphasize Emphasize
  button.c-btn--critical Critical
  button.c-btn--transparent Transparent

p
  input.c-btn--primary type="button" value="Primary"
  input.c-btn--secondary type="button" value="Secondary"
  input.c-btn--aux type="button" value="Auxiliary"
  input.c-btn--emphasize type="button" value="Emphasize"
  input.c-btn--critical type="button" value="Critical"
  input.c-btn--transparent type="button" value="Transparent"

<p>
  <a class="c-btn--primary" href="#">Primary</a><a class="c-btn--secondary" href="#">Secondary</a><a class="c-btn--aux" href="#">Auxiliary</a><a class="c-btn--emphasize" href="#">Emphasize</a><a class="c-btn--critical" href="#">Critical</a><a class="c-btn--transparent" href="#">Transparent</a>
</p>
<p>
  <button class="c-btn--primary">Primary</button><button class="c-btn--secondary">Secondary</button><button class="c-btn--aux">Auxiliary</button><button class="c-btn--emphasize">Emphasize</button><button class="c-btn--critical">Critical</button><button class="c-btn--transparent">Transparent</button>
</p>
<p>
  <input class="c-btn--primary" type="button" value="Primary" /><input class="c-btn--secondary" type="button" value="Secondary" /><input class="c-btn--aux" type="button" value="Auxiliary" /><input class="c-btn--emphasize" type="button" value="Emphasize" /><input class="c-btn--critical" type="button" value="Critical" /><input class="c-btn--transparent" type="button" value="Transparent" />
</p>

States

Disabled

To mark a button as disabled, add the disabled attribute to <button> or <input> element.

If you use <a> element, add the .disabled class alongside .c-btn.

Disabled Disabled Disabled Disabled Disabled Disabled

p
  button.c-btn disabled="disabled" Disabled
  button.c-btn--primary disabled="disabled" Disabled
  button.c-btn--secondary disabled="disabled" Disabled
  button.c-btn--aux disabled="disabled" Disabled
  button.c-btn--emphasize disabled="disabled" Disabled
  button.c-btn--critical disabled="disabled" Disabled
p
  a.c-btn.disabled href="#" Disabled
  a.c-btn--primary.disabled href="#" Disabled
  a.c-btn--secondary.disabled href="#" Disabled
  a.c-btn--aux.disabled href="#" Disabled
  a.c-btn--emphasize.disabled href="#" Disabled
  a.c-btn--critical.disabled href="#" Disabled

<p>
  <button class="c-btn" disabled="disabled">Disabled</button><button class="c-btn--primary" disabled="disabled">Disabled</button><button class="c-btn--secondary" disabled="disabled">Disabled</button><button class="c-btn--aux" disabled="disabled">Disabled</button><button class="c-btn--emphasize" disabled="disabled">Disabled</button><button class="c-btn--critical" disabled="disabled">Disabled</button>
</p>
<p>
  <a class="c-btn disabled" href="#">Disabled</a><a class="c-btn--primary disabled" href="#">Disabled</a><a class="c-btn--secondary disabled" href="#">Disabled</a><a class="c-btn--aux disabled" href="#">Disabled</a><a class="c-btn--emphasize disabled" href="#">Disabled</a><a class="c-btn--critical disabled" href="#">Disabled</a>
</p>

Active

To style a button so that it appears "pressed", add the .active class alongside .c-btn.

For <button> elements, no need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add the .active.

Active Active Active Active Active Active

p
  a.c-btn.active href="#" Active
  a.c-btn--primary.active href="#" Active
  a.c-btn--secondary.active href="#" Active
  a.c-btn--aux.active href="#" Active
  a.c-btn--emphasize.active href="#" Active
  a.c-btn--critical.active href="#" Active
p
  button.c-btn.active Active
  button.c-btn--primary.active Active
  button.c-btn--secondary.active Active
  button.c-btn--aux.active Active
  button.c-btn--emphasize.active Active
  button.c-btn--critical.active Active

<p>
  <a class="c-btn active" href="#">Active</a><a class="c-btn--primary active" href="#">Active</a><a class="c-btn--secondary active" href="#">Active</a><a class="c-btn--aux active" href="#">Active</a><a class="c-btn--emphasize active" href="#">Active</a><a class="c-btn--critical active" href="#">Active</a>
</p>
<p>
  <button class="c-btn active">Active</button><button class="c-btn--primary active">Active</button><button class="c-btn--secondary active">Active</button><button class="c-btn--aux active">Active</button><button class="c-btn--emphasize active">Active</button><button class="c-btn--critical active">Active</button>
</p>

Sizes

Add .-size-small for small buttons
Add .-size-large for large buttons
Add .-size-larger for larger buttons
Add .-size-huge for huge buttons

p
  button.c-btn.-size-small Small
  button.c-btn--primary.-size-small Small
  button.c-btn--secondary.-size-small Small
p
  button.c-btn Medium
  button.c-btn--primary Medium
  button.c-btn--secondary Medium
p
  button.c-btn.-size-large Large
  button.c-btn--primary.-size-large Large
  button.c-btn--secondary.-size-large Large
p
  button.c-btn.-size-larger Larger
  button.c-btn--primary.-size-larger Larger
  button.c-btn--secondary.-size-larger Larger
p
  button.c-btn.-size-huge Huge
  button.c-btn--primary.-size-huge Huge
  button.c-btn--secondary.-size-huge Huge

<p>
  <button class="c-btn -size-small">Small</button><button class="c-btn--primary -size-small">Small</button><button class="c-btn--secondary -size-small">Small</button>
</p>
<p>
  <button class="c-btn">Medium</button><button class="c-btn--primary">Medium</button><button class="c-btn--secondary">Medium</button>
</p>
<p>
  <button class="c-btn -size-large">Large</button><button class="c-btn--primary -size-large">Large</button><button class="c-btn--secondary -size-large">Large</button>
</p>
<p>
  <button class="c-btn -size-larger">Larger</button><button class="c-btn--primary -size-larger">Larger</button><button class="c-btn--secondary -size-larger">Larger</button>
</p>
<p>
  <button class="c-btn -size-huge">Huge</button><button class="c-btn--primary -size-huge">Huge</button><button class="c-btn--secondary -size-huge">Huge</button>
</p>

Widths

A buttons has a minimum width.

p
  button.c-btn--primary.-size-small OK
  button.c-btn--secondary.-size-small Cancel
p
  button.c-btn--primary OK
  button.c-btn--secondary Cancel
p
  button.c-btn--primary.-size-large OK
  button.c-btn--secondary.-size-large Cancel
p
  button.c-btn--primary.-size-larger OK
  button.c-btn--secondary.-size-larger Cancel
p
  button.c-btn--primary.-size-huge OK
  button.c-btn--secondary.-size-huge Cancel

<p>
  <button class="c-btn--primary -size-small">OK</button><button class="c-btn--secondary -size-small">Cancel</button>
</p>
<p>
  <button class="c-btn--primary">OK</button><button class="c-btn--secondary">Cancel</button>
</p>
<p>
  <button class="c-btn--primary -size-large">OK</button><button class="c-btn--secondary -size-large">Cancel</button>
</p>
<p>
  <button class="c-btn--primary -size-larger">OK</button><button class="c-btn--secondary -size-larger">Cancel</button>
</p>
<p>
  <button class="c-btn--primary -size-huge">OK</button><button class="c-btn--secondary -size-huge">Cancel</button>
</p>

If you need a button which has no minimum width, add .-width-compact modifier class.

p
  button.c-btn--primary.-size-small.-width-compact OK
  button.c-btn--secondary.-size-small.-width-compact Cancel
p
  button.c-btn--primary.-width-compact OK
  button.c-btn--secondary.-width-compact Cancel
p
  button.c-btn--primary.-size-large.-width-compact OK
  button.c-btn--secondary.-size-large.-width-compact Cancel
p
  button.c-btn--primary.-size-larger.-width-compact OK
  button.c-btn--secondary.-size-larger.-width-compact Cancel
p
  button.c-btn--primary.-size-huge.-width-compact OK
  button.c-btn--secondary.-size-huge.-width-compact Cancel

<p>
  <button class="c-btn--primary -size-small -width-compact">OK</button><button class="c-btn--secondary -size-small -width-compact">Cancel</button>
</p>
<p>
  <button class="c-btn--primary -width-compact">OK</button><button class="c-btn--secondary -width-compact">Cancel</button>
</p>
<p>
  <button class="c-btn--primary -size-large -width-compact">OK</button><button class="c-btn--secondary -size-large -width-compact">Cancel</button>
</p>
<p>
  <button class="c-btn--primary -size-larger -width-compact">OK</button><button class="c-btn--secondary -size-larger -width-compact">Cancel</button>
</p>
<p>
  <button class="c-btn--primary -size-huge -width-compact">OK</button><button class="c-btn--secondary -size-huge -width-compact">Cancel</button>
</p>

If you need a button which fits parent container, add .-width-full modifier class.

button.c-btn--emphasize.-size-large.-width-full Full width button

<button class="c-btn--emphasize -size-large -width-full">Full width button</button>

Buttons with icons

Add .-with-icon modifier class to create a button with an icon and a label.

p
  button.c-btn.-size-small.-with-icon
    i.kzicon.kzicon-pencil
    | 編集する
p
  button.c-btn.-with-icon
    i.kzicon.kzicon-gear
    | Settings
p
  button.c-btn--primary.-size-large.-with-icon
    i.kzicon.kzicon-plus
    | 新しいテストを作成する
p
  button.c-btn--primary.-size-larger.-with-icon
    i.kzicon.kzicon-profile
    | Log in
p
  button.c-btn--primary.-size-huge.-with-icon
    i.kzicon.kzicon-phone
    | Contact us

<p>
  <button class="c-btn -size-small -with-icon"><i class="kzicon kzicon-pencil"></i>編集する</button>
</p>
<p>
  <button class="c-btn -with-icon"><i class="kzicon kzicon-gear"></i>Settings</button>
</p>
<p>
  <button class="c-btn--primary -size-large -with-icon"><i class="kzicon kzicon-plus"></i>新しいテストを作成する</button>
</p>
<p>
  <button class="c-btn--primary -size-larger -with-icon"><i class="kzicon kzicon-profile"></i>Log in</button>
</p>
<p>
  <button class="c-btn--primary -size-huge -with-icon"><i class="kzicon kzicon-phone"></i>Contact us</button>
</p>

If you want to create a button with only an icon, .-with-icon class is unnecessary.

button.c-btn--aux
  i.kzicon.kzicon-round-arrow-right.kzicon-spin

<button class="c-btn--aux"><i class="kzicon kzicon-round-arrow-right kzicon-spin"></i></button>

Shapes

Square buttons

Add .-shape-square class to create a regular square button.

p
  button.c-btn.-shape-square
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-square href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-square
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-square
    i.kzicon.kzicon-pause

p
  button.c-btn.-shape-square.-size-large
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-square.-size-large href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-square.-size-large
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-square.-size-large
    i.kzicon.kzicon-pause

<p>
  <button class="c-btn -shape-square"><i class="kzicon kzicon-plus"></i></button><a class="c-btn--primary -shape-square" href="#"><i class="kzicon kzicon-upload"></i></a><button class="c-btn--secondary -shape-square"><i class="kzicon kzicon-download"></i></button><button class="c-btn--critical -shape-square"><i class="kzicon kzicon-pause"></i></button>
</p>
<p>
  <button class="c-btn -shape-square -size-large"><i class="kzicon kzicon-plus"></i></button><a class="c-btn--primary -shape-square -size-large" href="#"><i class="kzicon kzicon-upload"></i></a><button class="c-btn--secondary -shape-square -size-large"><i class="kzicon kzicon-download"></i></button><button class="c-btn--critical -shape-square -size-large"><i class="kzicon kzicon-pause"></i></button>
</p>

Rounded buttons

Add .-shape-square class to create a rounded button.

p
  button.c-btn.-shape-rounded.-size-small
    i.kzicon.kzicon-pause
  a.c-btn--primary.-shape-rounded.-size-small href="#"
    i.kzicon.kzicon-play
  button.c-btn--secondary.-shape-rounded.-size-small
    i.kzicon.kzicon-round-arrow-left
  button.c-btn--critical.-shape-rounded.-size-small
    i.kzicon.kzicon-cancel
p
  button.c-btn.-shape-rounded
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-rounded href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-rounded
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-rounded
    i.kzicon.kzicon-pause
p
  button.c-btn.-shape-rounded.-size-large
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-rounded.-size-large href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-rounded.-size-large
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-rounded.-size-large
    i.kzicon.kzicon-pause

<p>
  <button class="c-btn -shape-rounded -size-small"><i class="kzicon kzicon-pause"></i></button><a class="c-btn--primary -shape-rounded -size-small" href="#"><i class="kzicon kzicon-play"></i></a><button class="c-btn--secondary -shape-rounded -size-small"><i class="kzicon kzicon-round-arrow-left"></i></button><button class="c-btn--critical -shape-rounded -size-small"><i class="kzicon kzicon-cancel"></i></button>
</p>
<p>
  <button class="c-btn -shape-rounded"><i class="kzicon kzicon-plus"></i></button><a class="c-btn--primary -shape-rounded" href="#"><i class="kzicon kzicon-upload"></i></a><button class="c-btn--secondary -shape-rounded"><i class="kzicon kzicon-download"></i></button><button class="c-btn--critical -shape-rounded"><i class="kzicon kzicon-pause"></i></button>
</p>
<p>
  <button class="c-btn -shape-rounded -size-large"><i class="kzicon kzicon-plus"></i></button><a class="c-btn--primary -shape-rounded -size-large" href="#"><i class="kzicon kzicon-upload"></i></a><button class="c-btn--secondary -shape-rounded -size-large"><i class="kzicon kzicon-download"></i></button><button class="c-btn--critical -shape-rounded -size-large"><i class="kzicon kzicon-pause"></i></button>
</p>

Rounded buttons with labels

Wrap a button and its label text with .c-rounded-btn-with-label class.

Pause Play Cancel

p
  a.c-rounded-btn-with-label href="#"
    span.c-btn.-shape-rounded.-size-small
      i.kzicon.kzicon-pause
    | Pause
  a.c-rounded-btn-with-label href="#"
    span.c-btn--primary.-shape-rounded.-size-small
      i.kzicon.kzicon-play
    | Play
  a.c-rounded-btn-with-label href="#"
    span.c-btn--critical.-shape-rounded.-size-small
      i.kzicon.kzicon-cancel
    | Cancel

p
  a.c-rounded-btn-with-label href="#"
    span.c-btn.-shape-rounded
      i.kzicon.kzicon-pause
    | Pause
  a.c-rounded-btn-with-label href="#"
    span.c-btn--primary.-shape-rounded
      i.kzicon.kzicon-play
    | Play
  a.c-rounded-btn-with-label href="#"
    span.c-btn--critical.-shape-rounded
      i.kzicon.kzicon-cancel
    | Cancel


p
  a.c-rounded-btn-with-label href="#"
    span.c-btn.-shape-rounded.-size-large
      i.kzicon.kzicon-pause
    | Pause
  a.c-rounded-btn-with-label href="#"
    span.c-btn--primary.-shape-rounded.-size-large
      i.kzicon.kzicon-play
    | Play
  a.c-rounded-btn-with-label href="#"
    span.c-btn--critical.-shape-rounded.-size-large
      i.kzicon.kzicon-cancel
    | Cancel

<p>
  <a class="c-rounded-btn-with-label" href="#"><span class="c-btn -shape-rounded -size-small"><i class="kzicon kzicon-pause"></i></span>Pause</a><a class="c-rounded-btn-with-label" href="#"><span class="c-btn--primary -shape-rounded -size-small"><i class="kzicon kzicon-play"></i></span>Play</a><a class="c-rounded-btn-with-label" href="#"><span class="c-btn--critical -shape-rounded -size-small"><i class="kzicon kzicon-cancel"></i></span>Cancel</a>
</p>
<p>
  <a class="c-rounded-btn-with-label" href="#"><span class="c-btn -shape-rounded"><i class="kzicon kzicon-pause"></i></span>Pause</a><a class="c-rounded-btn-with-label" href="#"><span class="c-btn--primary -shape-rounded"><i class="kzicon kzicon-play"></i></span>Play</a><a class="c-rounded-btn-with-label" href="#"><span class="c-btn--critical -shape-rounded"><i class="kzicon kzicon-cancel"></i></span>Cancel</a>
</p>
<p>
  <a class="c-rounded-btn-with-label" href="#"><span class="c-btn -shape-rounded -size-large"><i class="kzicon kzicon-pause"></i></span>Pause</a><a class="c-rounded-btn-with-label" href="#"><span class="c-btn--primary -shape-rounded -size-large"><i class="kzicon kzicon-play"></i></span>Play</a><a class="c-rounded-btn-with-label" href="#"><span class="c-btn--critical -shape-rounded -size-large"><i class="kzicon kzicon-cancel"></i></span>Cancel</a>
</p>