Tag

Compact label with chrome — semantic colour, optional count badge, optional dismiss button. Tags carry active state that the user can interact with: filter chips in a filter bar, selected values inside a multi-select input, count breakdowns alongside a label.

Default

Neutral

Success

Warning

Error

Missing

<Tag variant="default">Default</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="error">Error</Tag>

When to reach for a Tag

• Filter chips — surface active filters in a filter bar; the user removes each with the closable × button
• Multi-select values — display selected options inside an input (assigned users, categories, tags)
• Label + count context — pair with the badge prop to show a numeric count alongside the label

When not to use a Tag

• Read-only status labels — use a DotIndicator instead. Tags imply interactivity; dots don't.
• Stacking many tags without a scroll or collapse affordance — they wrap and balloon vertically. Cap the row, or fold extras behind "+N more".

Outline

Default

Success

Warning

Error

<Tag variant="success" outline>Success</Tag>

Sizes

Small

Medium

<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>

With badge

Notifications

3

Active

12

Warnings

99

<Tag variant="default" :badge="3">Notifications</Tag>
<Tag variant="success" :badge="12">Active</Tag>

Closable

Filter: ESG

Active

<Tag variant="neutral" closable @close="onRemove">Filter: ESG</Tag>

Clickable

Clickable

<Tag variant="default" clickable @click="onSelect">Clickable</Tag>

Disabled

Disabled

Disabled success

Disabled closable

<Tag variant="default" disabled>Disabled</Tag>

Tag — Props

Prop	Type	Default	Description
variant	'default' | 'neutral' | 'success' | 'warning' | 'error' | 'missing'	'default'	Semantic color.
size	'sm' | 'md'	'md'	Tag size.
outline	boolean	false	Use the bordered/outline style.
disabled	boolean	false	Disabled state.
clickable	boolean	false	Render with pointer cursor and emit click.
closable	boolean	false	Show a close button; emits close.
badge	string | number	—	Render an indicator badge inside the tag.

Tag — Events

Event	Description
click	Emitted when clickable and the tag is clicked.
close	Emitted when the close button is clicked.

---

PercentTag

Convenience wrapper that picks variant based on a percentage threshold — for completion, progress, or KPI displays. Renders a small Tag with the percentage as the label.

value is a percentage (0–100), not a fraction.

<PercentTag :value="92" />
<PercentTag :value="74" />
<PercentTag :value="42" />
<PercentTag :value="15" />

PercentTag — Props

Prop	Type	Default	Description
value	number	required	Percentage 0–100. The displayed label is the value rounded to 2 decimals.
thresholds	{ green: number, yellow: number, orange: number }	{ green: 90, yellow: 80, orange: 50 }	Cutoffs (in percentage) for the four semantic variants.

Variant mapping

value ≥	Resulting variant
thresholds.green (90)	success
thresholds.yellow (80)	warning
thresholds.orange (50)	missing
below thresholds.orange	error

---

EnergyTag

Domain wrapper around Tag for EU Energy Performance Certificate ratings (A best – G worst). Each letter renders with its own background from the energy-label palette and a contrast-aware text colour. Pass null to render a "no label" placeholder.

A

B

C

D

E

F

G

—

<EnergyTag :energy-label="rating" />
<EnergyTag :energy-label="null" />

EnergyTag — Props

Prop	Type	Default	Description
energyLabel	'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | null	required	The EPC rating. null renders a dashed "no label" placeholder.
size	'sm' | 'md'	'sm'	Pill size; matches Tag's sizing scale.

The component composes with Tag's base shape (tagVariants), so layout and rounding stay consistent across the system.

---

usePercentageVariant

Use the underlying composable directly when you need the variant in another context (e.g. inside a Table cell), without rendering a Tag.

import { usePercentageVariant } from '@scaler-tech/aurora/tag'

const { getVariantByPercentage } = usePercentageVariant() // uses default thresholds
const variant = getVariantByPercentage(82) // → 'warning'

To customize thresholds:

const { getVariantByPercentage } = usePercentageVariant({
    green: 95,
    yellow: 85,
    orange: 60,
})