Badge

Small count and labelling component using .velin-badge. Available in six colour variants with outline, dot, and large size modifiers.

Color Variants

Default Primary Secondary Success Warning Danger Info

<span class="velin-badge">Default</span>
<span class="velin-badge velin-badge--primary">Primary</span>
<span class="velin-badge velin-badge--secondary">Secondary</span>
<span class="velin-badge velin-badge--success">Success</span>
<span class="velin-badge velin-badge--warning">Warning</span>
<span class="velin-badge velin-badge--danger">Danger</span>
<span class="velin-badge velin-badge--info">Info</span>

Outline

Primary Danger

<span class="velin-badge velin-badge--primary velin-badge--outline">Primary</span>
<span class="velin-badge velin-badge--danger velin-badge--outline">Danger</span>

Dot & Sizes

Default size Large badge

<!-- Dot -->
<span class="velin-badge velin-badge--success velin-badge--dot"></span>

<!-- Large -->
<span class="velin-badge velin-badge--primary velin-badge--lg">Large badge</span>

Accessibility

Use aria-label on dot badges to convey meaning (e.g. aria-label="Online").
When a badge conveys count information, use aria-label or pair it with visible text.

CSS Variables

Variable	Description
`--velin-color-primary`	Primary variant background
`--velin-color-on-primary`	Primary variant text
`--velin-color-surface-dim`	Default variant background
`--velin-radius-full`	Pill shape radius
`--velin-text-xs`	Default font size
`--velin-text-sm`	Large badge font size