Button
Buttons exist in different styles and colors. You can also use an <a> tag instead of <button>.
File to include
@import "components/button";Script to include
<script src="/lib/button.js"></script>Plain
<button class="btn" data-button-style="plain" data-color="primary">Button</button>
<button class="btn" data-button-style="plain" data-color="secondary">Button</button>
<button class="btn" data-button-style="plain" data-color="success">Button</button>
<button class="btn" data-button-style="plain" data-color="danger">Button</button>
<button class="btn" data-button-style="plain" data-color="warning">Button</button>
<button class="btn" data-button-style="plain" data-color="white">Button</button>
<button class="btn" data-button-style="plain" data-color="primary" disabled>Button</button>Text
<button class="btn" data-button-style="text" data-color="primary">Button</button>
<button class="btn" data-button-style="text" data-color="secondary">Button</button>
<button class="btn" data-button-style="text" data-color="success">Button</button>
<button class="btn" data-button-style="text" data-color="danger">Button</button>
<button class="btn" data-button-style="text" data-color="warning">Button</button>
<button class="btn" data-button-style="text" data-color="white">Button</button>
<button class="btn" data-button-style="text" data-color="primary" disabled>Button</button>Outline
<button class="btn" data-button-style="outline" data-color="primary">Button</button>
<button class="btn" data-button-style="outline" data-color="secondary">Button</button>
<button class="btn" data-button-style="outline" data-color="success">Button</button>
<button class="btn" data-button-style="outline" data-color="danger">Button</button>
<button class="btn" data-button-style="outline" data-color="warning">Button</button>
<button class="btn" data-button-style="outline" data-color="white">Button</button>
<button class="btn" data-button-style="outline" data-color="primary" disabled>Button</button>With an icon
<button class="btn" data-button-style="plain" data-color="primary" data-icon-left="send-solid">Button</button>
<button class="btn" data-button-style="text" data-color="secondary" data-icon-right="chevron-down-solid">Button</button>Loading
<button class="btn" data-button-style="outline" data-color="success" data-loading>Button</button>Attributes
| Name | Example value | Possible values | Default | Required |
|---|---|---|---|---|
| data-button-style | outline | "plain" | "text" | "outline" | plain | No |
| data-color | success | "primary" | "secondary" | "success" | "danger" | "warning" | "white" | primary | No |
| data-icon-left | mail-solid | - | None | No |
| data-icon-right | chevron-right-solid | - | None | No |
| data-loading | - | - | None | No |
| data-no-padding | - | - | None | No |