Badge

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

Change Log

Functions

hx.badgeoptionsObjectSelection

A function that returns a badge as a selection.

Arguments

options

Properties

inverseBoolean

Default: false

typeString

The type of badge to create. When no type is provided, the badge will be the default grey type.

The supported types are:

success
warning
danger

Returns

Selection

A span element with the appropriate badge classes.

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