Buttons

Use buttons to allow users to take actions or make choices.

Playground

Use the controls below to customize the button and see the code for it.

<!-- Normal button -->
<button type="button" class="btn">Button</button>

<!-- Button with icon -->
<button type="button" class="btn"><i class="icon icon-search"></i>Button</button>

<!-- Icon only button -->
<button type="button" class="btn btn-icon" aria-label="Search"><i class="icon icon-search"></i></button>

<!-- Button group -->
<div class="btn-group">
    <button type="button" class="btn">Button 1</button>
    <button type="button" class="btn">Button 2</button>
    <button type="button" class="btn">Button 3</button>
</div>

<!-- Button group with icons -->
<div class="btn-group">
    <button type="button" class="btn btn-icon" aria-label="Bold"><i class="icon icon-bold-b"></i></button>
    <button type="button" class="btn btn-icon" aria-label="Italic"><i class="icon icon-italic-i"></i></button>
    <button type="button" class="btn btn-icon" aria-label="Underline"><i class="icon icon-underline-u"></i></button>
</div>

Base class

Buttons have a base class of btn that can be used to style them.

<button type="button" class="btn">Button</button>

Variants

Buttons can have different variants by adding additional classes.

Button sizes

Buttons can come in different sizes: small, medium and large, with medium being the default. Use btn-lg for large buttons, or btn-sm for small buttons.

<button type="button" class="btn btn-large">Large button</button>
<button type="button" class="btn">Medium button</button>
<button type="button" class="btn btn-small">Small button</button>

Icon buttons

Add btn-icon to a button that only displays an icon to make the button square.

<button type="button" class="btn btn-icon" aria-label="Search"><i class="icon icon-search"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-progressive" aria-label="Appearance"><i class="icon icon-appearance"></i></button>
<button type="button" class="btn btn-small btn-icon" aria-label="Article"><i class="icon icon-article"></i></button>
<button type="button" class="btn btn-large btn-icon" aria-label="Bookmark"><i class="icon icon-bookmark"></i></button>

Button groups

Wrap buttons in a <div class="btn-group"> to create a group of buttons.

<div class="btn-group">
    <button type="button" class="btn">Button 1</button>
    <button type="button" class="btn">Button 2</button>
    <button type="button" class="btn">Button 3</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-icon" aria-label="Bold"><i class="icon icon-bold-b"></i></button>
    <button type="button" class="btn btn-icon" aria-label="Italic"><i class="icon icon-italic-i"></i></button>
    <button type="button" class="btn btn-icon" aria-label="Underline"><i class="icon icon-underline-u"></i></button>
</div>