Back to the list

Button icon

Buttons with icon exist in different styles and colors. You can also use an <a> tag instead of <button>.

File to include

@import "components/button-icon";

Script to include

<script src="/lib/button-icon.js"></script>

Plain

<button class="btn-icon" data-color="primary" data-button-style="plain" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="secondary" data-button-style="plain" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="success" data-button-style="plain" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="danger" data-button-style="plain" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="warning" data-button-style="plain" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="white" data-button-style="plain" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="primary" data-button-style="plain" data-icon="mail-solid" disabled></button>

Transparent

<button class="btn-icon" data-color="primary" data-button-style="transparent" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="secondary" data-button-style="transparent" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="success" data-button-style="transparent" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="danger" data-button-style="transparent" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="warning" data-button-style="transparent" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="white" data-button-style="transparent" data-icon="mail-solid"></button>
<button class="btn-icon" data-color="primary" data-button-style="transparent" data-icon="mail-solid" disabled></button>

Loading

<button class="btn-icon" data-color="primary" data-button-style="plain" data-icon="mail-solid" data-loading></button>

Attributes

Name Example value Possible values Default Required
data-icon bubble-message-solid - None Yes
data-button-style transparent "plain" | "transparent" plain No
data-color danger "primary" | "secondary" | "success" | "danger" | "warning" | "white" primary No
data-loading - - None No