Tag Module

The Tag module provides label-like UI elements with support for colors, sizes, rounded/action states, and loading/disabled variants. It extends the Element module.

Default

Clickable

Loading

Disabled

Primary

Clickable

Loading

Disabled

Green

Clickable

Loading

Disabled

Indigo

Clickable

Loading

Disabled

Maroon

Clickable

Loading

Disabled

Signature:

@mixin use-tag($colors: (), $sizes: ());

Example:

@include termeh.use-tag(("primary", "success"), ("small", "medium"));

Module:

This module is registered as tag in the presented modules.

Dependencies

Tag module uses the following Termeh global var():

Component	Type	Usage	Default
radius → normal	Number	Default tag border radius	null
radius → rounded	Number	Rounded tag border radius	null
decorator → size	Color	Loading spinner thickness	null
control → height	Number	Default tag height	2.2em

---

Tag module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
shade	Default focus/active outline color	error
shade → readable	Default text/icon color	null
shade → light	Default tag background color	null

Modifiers

• .is-action → makes icon clickable
• .is-rounded → applies rounded border-radius
• .is-loading → applies loading state
• .is-disabled → applies disabled state
• .is-<size> → applies a registered size as font size
• .is-<color> → applies a registered color as accent color