HexagonJS
Edit Page
Badge
Provides the hx-badge class for styling <span> elements.
Examples
Default Successful Warning Failed

HTML

<span class="hx-badge">Default</span>
<span class="hx-badge hx-success">Successful</span>
<span class="hx-badge hx-warning">Warning</span>
<span class="hx-badge hx-danger">Failed</span>

Outlined Badges

Default Successful Warning Failed

HTML

<h3>Outlined Badges</h3>
<span class="hx-badge hx-badge-inverse">Default</span>
<span class="hx-badge hx-badge-inverse hx-success">Successful</span>
<span class="hx-badge hx-badge-inverse hx-warning">Warning</span>
<span class="hx-badge hx-badge-inverse hx-danger">Failed</span>
Api
Classes
hx-badge
Applies badge styling to <span> elements.
Extra Classes
hx-badge-inverse
Inverts the label styling to display a coloured border to provide less emphasis but still utilise the Badge style.
hx-danger
Adds styling indicative of failure, danger or something negative
hx-success
Adds styling indicative of success, confirmation or something positive
hx-warning
Adds styling indicative of warning, to suggest the user should use caution