HexagonJS
Edit Page
Label
Provides the hx-label class for styling <span> elements.
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
Classes
hx-label
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