Buttons

Default State

<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>

Active State

<button class="active btn btn-default" type="button">Default</button>
<button class="active btn btn-primary" type="button">Primary</button>
<button class="active btn btn-info" type="button">Info</button>
<button class="active btn btn-success" type="button">Success</button>
<button class="active btn btn-warning" type="button">Warning</button>
<button class="active btn btn-danger" type="button">Danger</button>
<button class="active btn btn-link" type="button">Link</button>

Disabled State

<button class="btn btn-default" disabled="disabled" type="button">Default</button>
<button class="btn btn-primary" disabled type="button">Primary</button>
<button class="btn btn-info" disabled type="button">Info</button>
<button class="btn btn-success" disabled type="button">Success</button>
<button class="btn btn-warning" disabled type="button">Warning</button>
<button class="btn btn-danger" disabled type="button">Danger</button>
<button class="btn btn-link" disabled type="button">Link</button>

Anchor Elements and Inputs as Buttons

Anchor Anchor Anchor Anchor Anchor

<a class="btn btn-default" href="#1">Default</a>
<input class="btn btn-primary" type="button" value="Input" />
<input class="btn btn-info" type="submit" value="Submit" />
<a class="btn btn-success" href="#1">Success</a>
<a class="btn btn-warning" href="#1">Warning</a>
<a class="btn btn-danger" href="#1">Danger</a>
<a class="btn btn-link" href="#1">Link</a>

Sizes

<button class="btn btn-default btn-xs" type="button">Extra Small</button>
<button class="btn btn-default btn-sm" type="button">Small</button>
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-default btn-lg" type="button">Large</button>

Block Level Buttons

<button class="btn btn-block btn-primary btn-xs" type="button">Extra Small Block Level Button</button>
<button class="btn btn-block btn-primary btn-sm" type="button">Small Block Level Button</button>
<button class="btn btn-block btn-primary" type="button">Default Block Level Button</button>
<button class="btn btn-block btn-lg btn-primary" type="button">Large Block Level Button</button>

Button Dropdowns

<div class="btn-group dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Default <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li class="divider"></li>
        <li><a href="#1">Scope</a></li>
    </ul>
</div>

Button Dropups

<div class="btn-group dropup">
    <button class="btn btn-default" type="button">Dropup</button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Split Button Dropdowns

<div class="btn-group dropdown">
    <button class="btn btn-default" type="button">Default</button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li class="divider"></li>
        <li><a href="#1">Scope</a></li>
    </ul>
</div>

Button Group

<div class="btn-group">
    <button class="btn btn-default" type="button">Left</button>
    <button class="btn btn-default" type="button">Middle</button>
    <button class="btn btn-default" type="button">Right</button>
</div>

Vertical Button Group

<div class="btn-group-vertical">
    <button class="btn btn-default" type="button">Button</button>

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

    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

Justified Button Groups

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button class="btn btn-default" type="button">Left</button>
    </div>

    <div class="btn-group">
        <button class="btn btn-default" type="button">Middle</button>
    </div>

    <div class="btn-group">
        <button class="btn btn-default" type="button">Right</button>
    </div>
</div>

Action Buttons

Position the action buttons on any corner of the page using the classes btn-top-left, btn-top-right, btn-bottom-right, and btn-bottom-left.

Action buttons are used for providing easy access to primary actions, such as adding new entities (users, organizations, new blog entries). There are two kinds of action buttons: .btn-action and .btn-action-secondary.

.btn-action should be used where only one primary action can be taken. A good use of .btn-action is adding a new entry in the blog portlet, where the user will be led to the new blog entry page.

Lexicon SVG

Font Awesome

Glyphicon

<a class="btn btn-action btn-primary" href="../blogs-action">
    <span aria-label="icon-plus" class="lexicon-icon-container" role="img">
        <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
            <use xlink:href="../../images/icons/icons.svg#plus" />
        </svg>
    </span>
</a>

.btn-action-secondary should be used where multiple primary actions can be taken. This button will display an overflow menu with a list of available actions. For example, on the users and organizations page in the control panel, a user, organization, or location can be added. Clicking the button inside btn-action-secondary will open an overflow menu with add user, add organization, or add location options (button on bottom right).

<div class="btn-action-secondary dropdown">
    <button class="btn btn-primary" data-toggle="dropdown" type="button">
        <span aria-label="icon-plus" class="lexicon-icon-container" role="img">
            <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
                <use xlink:href="../../images/icons/icons.svg#plus" />
            </svg>
        </span>
    </button>
    <ul class="dropdown-menu dropdown-menu-bottom dropdown-menu-right-side">
        <li><a href="../blogs-action">User</a></li>
        <li><a href="../blogs-action">Regular Organization</a></li>
        <li><a href="../blogs-action">Location</a></li>
    </ul>
</div>