Skip to main content

# Buttons

Use Black Dashboard's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

## Examples

Black Dashboard has changed the predefined button styles from Bootstrap, each serving its own semantic purpose, with a few extras thrown in for more control.

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</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-default">Default</button>

## Animation on hover

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

## Style buttons

    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-round">Round</button>
    <button class="btn btn-primary btn-round">
      <i class="tim-icons icon-heart-2"></i> With Icon
    </button>
    <button class="btn btn-primary btn-fab btn-icon btn-round">
      <i class="tim-icons icon-heart-2"></i>
    </button>
    <button class="btn btn-primary btn-simple">Simple</button>
    <button class="btn btn-primary btn-link">Link</button>

## Sizes

Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

    <button class="btn btn-primary btn-sm">Small</button>
    <button class="btn btn-primary">Regular</button>
    <button class="btn btn-primary btn-lg">Large</button>

## Disabled state

Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.

    <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
    <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Disabled buttons using the `<a>` element behave a bit different:

- `<a>`s don’t support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.
- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.

Primary link Link

    <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

If you want to see more examples and properties please check the official Bootstrap Documentation.