Label

Examples

hx-label hx-action hx-positive hx-warning hx-negative hx-info hx-compliment hx-contrast

Outlined Labels

hx-label hx-action hx-positive hx-warning hx-negative hx-info hx-compliment hx-contrast

HTML

<span class="hx-label">hx-label</span>
<span class="hx-label hx-action">hx-action</span>
<span class="hx-label hx-positive">hx-positive</span>
<span class="hx-label hx-warning">hx-warning</span>
<span class="hx-label hx-negative">hx-negative</span>
<span class="hx-label hx-info">hx-info</span>
<span class="hx-label hx-compliment">hx-compliment</span>
<span class="hx-label hx-contrast">hx-contrast</span>
<h3>Outlined Labels</h3>
<span class="hx-label hx-label-outline">hx-label</span>
<span class="hx-label hx-label-outline hx-action">hx-action</span>
<span class="hx-label hx-label-outline hx-positive">hx-positive</span>
<span class="hx-label hx-label-outline hx-warning">hx-warning</span>
<span class="hx-label hx-label-outline hx-negative">hx-negative</span>
<span class="hx-label hx-label-outline hx-info">hx-info</span>
<span class="hx-label hx-label-outline hx-compliment">hx-compliment</span>
<span class="hx-label hx-label-outline hx-contrast">hx-contrast</span>

Api

Change Log

Functions

hx.labeloptionsObjectSelectiondeprecated

Deprecated

The label module is deprecated in favour of the badge module

Creates a detached span element, classed with hx-label, wrapped in a selection

Arguments

options

Properties

contextString

The context class to apply to the label

Returns

Selection

The selection containing the new element

Classes

hx-labeldeprecated

Deprecated

This module has been replaced by the Badge module

Applies styling to <span> elements.

Extra Classes

hx-action

Styles the label with action colors

hx-complement

Styles the label with complement colors

hx-contrast

Styles the label with contrast colors

hx-info

Styles the label to indicate that clicking it will lead to some form of documentation / information.

hx-label-outline

hx-negative

Adds styling indicative of failure, danger or something negative

hx-positive

Adds styling indicative of success, confirmation or something positive

hx-warning

Adds styling indicative of warning, to suggest the user should use caution