# 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

Show code

    <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

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

Show code

    <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

Show code

    <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

Show code

    <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

Show code

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

Show code

    <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

Show code

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

Show code

    <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

Show code

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