Badges

vel-src: badge.css

Compact inline labels for status, counts, and tags. Supports all semantic colors, size variants, square style, and a dot indicator mode.

Class	Properties
vel-badge	Base badge — inline-flex, small font, border-radius, padding
vel-badge-primary	Primary color background and text
vel-badge-secondary	Secondary color background and text
vel-badge-success	Success green background and text
vel-badge-danger	Danger red background and text
vel-badge-warning	Warning amber background and text
vel-badge-info	Info blue background and text
vel-badge-neutral	Neutral/muted background and text
vel-badge-sm	Smaller padding and font size
vel-badge-lg	Larger padding and font size
vel-badge-square	Removes border-radius for a rectangular shape
vel-badge-dot	Renders as a small filled circle indicator (no text)

Examples

Color variants

Primary Secondary Success Danger Warning Info Neutral

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
  <span class="vel-badge vel-badge-primary">Primary</span>
  <span class="vel-badge vel-badge-secondary">Secondary</span>
  <span class="vel-badge vel-badge-success">Success</span>
  <span class="vel-badge vel-badge-danger">Danger</span>
  <span class="vel-badge vel-badge-warning">Warning</span>
  <span class="vel-badge vel-badge-info">Info</span>
  <span class="vel-badge vel-badge-neutral">Neutral</span>
</div>

Sizes

Small Default Large

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:10px;align-items:center;">
  <span class="vel-badge vel-badge-primary vel-badge-sm">Small</span>
  <span class="vel-badge vel-badge-primary">Default</span>
  <span class="vel-badge vel-badge-primary vel-badge-lg">Large</span>
</div>

With dot indicator

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:12px;align-items:center;">
  <span class="vel-badge vel-badge-success vel-badge-dot"></span>
  <span class="vel-badge vel-badge-danger vel-badge-dot"></span>
  <span class="vel-badge vel-badge-warning vel-badge-dot"></span>
</div>