Buttons

Use our custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap Documentation

Examples

Default

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

<button type="button" class="btn btn-link">Link</button>

Tags

Link 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Soft

<button type="button" class="btn btn-soft-primary">
    Primary
</button><button type="button" class="btn btn-soft-success">
    Success
</button><button type="button" class="btn btn-soft-danger">
    Danger
</button><button type="button" class="btn btn-soft-warning">
    Warning
</button><button type="button" class="btn btn-soft-info">
    Info
</button><button type="button" class="btn btn-soft-dark">
    Dark
</button>

Outline

<button type="button" class="btn btn-outline-primary">
    Primary
</button><button type="button" class="btn btn-outline-success">
    Success
</button><button type="button" class="btn btn-outline-danger">
    Danger
</button><button type="button" class="btn btn-outline-warning">
    Warning
</button><button type="button" class="btn btn-outline-info">
    Info
</button><button type="button" class="btn btn-outline-dark">
    Dark
</button>

Brand

<button type="button" class="btn btn-facebook btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-facebook"></i>
    </span>
    <span class="btn-inner--text">Facebook</span>
</button>
<button type="button" class="btn btn-twitter btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-twitter"></i>
    </span>
    <span class="btn-inner--text">Twitter</span>
</button>
<button type="button" class="btn btn-google-plus btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-google-plus-g"></i>
    </span>
    <span class="btn-inner--text">Google +</span>
</button>
<button type="button" class="btn btn-instagram btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-instagram"></i>
    </span>
    <span class="btn-inner--text">Instagram</span>
</button>
<button type="button" class="btn btn-pinterest btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-pinterest"></i>
    </span>
    <span class="btn-inner--text">Pinterest</span>
</button>
<button type="button" class="btn btn-youtube btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-youtube"></i>
    </span>
    <span class="btn-inner--text">Youtube</span>
</button>
<button type="button" class="btn btn-vimeo btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-vimeo"></i>
    </span>
    <span class="btn-inner--text">Vimeo</span>
</button>
<button type="button" class="btn btn-slack btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-slack"></i>
    </span>
    <span class="btn-inner--text">Slack</span>
</button>
<button type="button" class="btn btn-dribbble btn-icon-label">
    <span class="btn-inner--icon">
        <i class="fab fa-dribbble"></i>
    </span>
    <span class="btn-inner--text">Dribbble</span>
</button>

Icon

Simple

<button type="button" class="btn btn-primary btn-icon-only">
    <span class="btn-inner--icon">
        <i data-feather="user"></i>
    </span>
</button>
<button type="button" class="btn btn-secondary btn-icon-only">
    <span class="btn-inner--icon">
        <i data-feather="arrow-left"></i>
    </span>
</button>
<button type="button" class="btn btn-danger btn-icon-only">
    <span class="btn-inner--icon">
        <i data-feather="trash-2"></i>
    </span>
</button>
<button type="button" class="btn btn-primary rounded-circle btn-icon-only">
    <span class="btn-inner--icon">
        <i data-feather="user"></i>
    </span>
</button>
<button type="button" class="btn btn-secondary rounded-circle btn-icon-only">
    <span class="btn-inner--icon">
        <i data-feather="arrow-left"></i>
    </span>
</button>
<button type="button" class="btn btn-danger rounded-circle btn-icon-only">
    <span class="btn-inner--icon">
        <i data-feather="trash-2"></i>
    </span>
</button>

Text

<button type="button" class="btn btn-primary btn-icon">
    <span class="btn-inner--icon">
        <i data-feather="user"></i>
    </span>
    <span class="btn-inner--text">Create account</span>
</button>
<button type="button" class="btn btn-danger btn-icon">
    <span class="btn-inner--icon">
        <i data-feather="x-circle"></i>
    </span>
    <span class="btn-inner--text">Deactivate</span>
</button>
<button type="button" class="btn btn-primary btn-icon">
    <span class="btn-inner--text">Create account</span><span class="btn-inner--icon">
        <i data-feather="user"></i>
    </span>
</button>
<button type="button" class="btn btn-danger btn-icon">
    <span class="btn-inner--text">Deactivate</span><span class="btn-inner--icon">
        <i data-feather="x-circle"></i>
    </span>
</button>

Options

States

<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-secondary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle</button>
<button type="button" class="btn btn-primary">
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    <span class="sr-only">Loading...</span>
</button>
<button type="button" class="btn btn-secondary">
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    <span class="sr-only">Loading...</span>
</button>
Summary