CNVS

Buttons

Table of Contents

Canvas adds support for a range of button states and sizes. Simply add the .button class to any <a> or <button> to get started.

Simple Button 
<a href="#" class="button">
  Simple Button
</a>

Button Sizes

By default, buttons display at a standard size, comparable to that of an input field. Four additional sizes are available: mini, small, large, and jumbo. Add classes .button-mini, .button-small, .button-large, and .button-jumbo respectively to each button to adjust it’s size.

Jumbo Large Default Small Mini 
<!-- Button: Jumbo -->
<a href="#" class="button button-jumbo">
  Jumbo
</a>

<!-- Button: Large -->
<a href="#" class="button button-large">
  Large
</a>

<!-- Button: Default -->
<a href="#" class="button">
  Default
</a>

<!-- Button: Small -->
<a href="#" class="button button-small">
  Small
</a>

<!-- Button: Mini -->
<a href="#" class="button button-mini">
  Mini
</a>

Button States

You may wish to display more than the single button type, either to create separation in the importance of various actions or to communicate the state of an action or form. Button states make this super easy.

Default Primary Success Warning Danger 
<!-- Button: Default -->
<a href="#" class="button">
  Default
</a>

<!-- Button: Primary -->
<a href="#" class="button button-primary">
  Primary
</a>

<!-- Button: Success -->
<a href="#" class="button button-success">
  Success
</a>

<!-- Button: Warning -->
<a href="#" class="button button-warning">
  Warning
</a>

<!-- Button: Danger -->
<a href="#" class="button button-danger">
  Danger
</a>

Button Types

We realize that one button shape and style, even with it’s available states, may not be enough for the unique needs of your project. This is why we’ve include a number of additional button types: rounded, outlined, link.

Rounded Button

Add the class .button-rounded to any .button element to display it with rounded caps.

Default Primary Success Warning Danger 
<!-- Button: Default -->
<a href="#" class="button button-rounded">
  Default
</a>

<!-- Button: Primary -->
<a href="#" class="button button-rounded button-primary">
  Primary
</a>

Outline Button

Add the class .button-*-outline to any .button element to display it with a thin outline.

Default Primary Success Warning Danger 
<!-- Button: Default -->
<a href="#" class="button button-outline">
  Default
</a>

<!-- Button: Primary -->
<a href="#" class="button button-primary-outline">
  Primary
</a>

Add the class .button-*-link to any .button element to display it as “text-only”, while retaining the exact size attributes of it’s normal button counterpart.

Default Primary Success Warning Danger 
<!-- Button: Default -->
<a href="#" class="button button-link">
  Default
</a>

<!-- Button: Primary -->
<a href="#" class="button button-primary-link">
  Primary
</a>

Combine Button Types

Want an outlined button that has rounded caps? Go ahead and combine button classes to yield interesting display combinations.

Default Primary Success Warning Danger 
<!-- Button: Default -->
<a href="#" class="button button-outline button-rounded">
  Default
</a>

<!-- Button: Primary -->
<a href="#" class="button button-primary-outline button-rounded">
  Primary
</a>

Inverse Styling

Add the class .button-inverse to any .button element to leverage inverse styling.

Default Primary Success Warning Danger
Default Primary Success Warning Danger
Default Primary Success Warning Danger 
<a href="#" class="button button-inverse">
  Default
</a>

Wide Buttons

Use the class .button-wide to increase the horizontal padding within a button.

Wide Button Wide Button 
<a href="#" class="button button-wide">
  Wide Button
</a>

Narrow Buttons

Use the class .button-narrow to decrease the horizontal padding within a button.

Narrow Button Narrow Button 
<a href="#" class="button button-narrow">
  Narrow Button
</a>

Flush Buttons

Use the class .button-flush to remove the padding within a button. This is useful when you want to assume button like behavior, particulary for .button-link styling, but do not want the added space created by the padding.

Class Description
.button-flush Remove the padding entirely.
.button-flush-horizontal Remove the horizontal padding.
.button-flush-vertical Remove the vertical padding.
.button-flush-top Remove the top padding inside of a button.
.button-flush-right Remove the right padding inside of a button.
.button-flush-bottom Remove the bottom padding inside of a button.
.button-flush-left Remove the left padding inside of a button.
Flush Button Flush Button 
<a href="#" class="button button-flush">
  Flush Button
</a>

Block Buttons

Use the class .button-block when you need a button to fill the entire width of it’s parent container.

Block Button Block Button 
<a href="#" class="button button-block">
  Block Button
</a>

Responsive Block Buttons

Optional classes are available when you need a button to fill it’s parent container only below a specific screen size. Add .button-block-below-screen-*, replacing * with -mini, -small, -medium, or -large. Try it out. Resize this browser window and observe when the buttons below switch to their Block view.

Block Button (Mini) Block Button (Small) Block Button (Medium) Block Button (Large) 
<!-- Block Button: When Smaller than Screen Mini-->
<a href="#" class="button button-block button-block-below-screen-small">
  Block Button (Mini)
</a>

<!-- Block Button: When Smaller than Screen Small-->
<a href="#" class="button button-block button-block-below-screen-medium">
  Block Button (Small)
</a>

<!-- Block Button: When Smaller than Screen Medium-->
<a href="#" class="button button-block button-block-below-screen-large">
  Block Button (Medium)
</a>

<!-- Block Button: When Smaller than Screen Large-->
<a href="#" class="button button-block button-block-below-screen-jumbo">
  Block Button (Large)
</a>

Button Dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Single Button Dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

<div class="button-group">
  <button type="button" class="button dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Toggle Button
  </button>
  <span class="dropdown-menu" role="menu">
    <ul class="dropdown-menu-list">
      <li>
        <a href="#">
          Action
        </a>
      </li>
      <li>
        <a href="#">
          Another action
        </a>
      </li>
      <li>
        <a href="#">
          Something else here
        </a>
      </li>
    </ul>
  </span>
</div>

Button Dropdown Sizes

Button dropdowns work with buttons of all sizes.

<div class="button-collection">
  <div class="button-group">
    <button type="button" class="button button-jumbo dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Jumbo
    </button>
    <span class="dropdown-menu" role="menu">
      …
    </span>
  </div>

  <div class="button-group">
    <button type="button" class="button button-large dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Large
    </button>
    <span class="dropdown-menu" role="menu">
      …
    </span>
  </div>

  <div class="button-group">
    <button type="button" class="button dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Medium
    </button>
    <span class="dropdown-menu" role="menu">
      …
    </span>
  </div>

  <div class="button-group">
    <button type="button" class="button button-small dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Small
    </button>
    <span class="dropdown-menu" role="menu">
      …
    </span>
  </div>

  <div class="button-group">
    <button type="button" class="button button-mini dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Mini
    </button>
    <span class="dropdown-menu" role="menu">
      …
    </span>
  </div>
</div>

Styled Button Dropdown

Button dropdowns work with all supported button styles. Add .button-stroke or any other included button style class to your button dropdown element. You can even combine styles.

Button Controls

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Toggle Buttons

Add data-toggle="button" to activate toggling on a single button.

<button type="button" class="button button-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Toggle Button
</button>

Checkbox & Radio Button Groups

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

Checkbox Button Groups

<div class="button-group" data-toggle="buttons">
  <label class="button button-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1
  </label>
  <label class="button button-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="button button-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Radio Button Groups

<div class="button-group" data-toggle="buttons">
  <label class="button button-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1
  </label>
  <label class="button button-primary">
    <input type="radio" name="options" id="option1" autocomplete="off"> Radio 2
  </label>
  <label class="button button-primary">
    <input type="radio" name="options" id="option1" autocomplete="off"> Radio 3
  </label>
</div>

Button Content

By default, buttons are defined so that all content will display vertically centered inside the button. However, it may be necessary to place more than just text inside of a button. For example, you may want a small icon next to the button label. Space will be applied between child elements of a button automatically.

Button Button 
<!-- Button: Default -->
<a href="#" class="button">
  <i class="icon icon-mini"></i>
  <span>Button</span>
</a>