Buttons

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

Bootstrap Buttons documentation share-external-link-1

Examples

Dashly includes several predefined button styles, 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-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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Soft styleExclusive

Use the .text-bg-*-soft class to create softer background color.

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

Outline buttons

Replace the default modifier classes with the .btn-outline-* classes to remove all background images and colors on any button.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</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-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

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

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-primary">Default Size</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>