Badge

Compact signals for status, metadata, and membership. Six semantic colors with soft, outline, and solid treatments, icon slots, and status dots.

View source Installation

Preview

A SIGNAL, AT A GLANCE

The state of things.

Productionvelocityui.dev

Healthy

Previewfeature / new-components

Building

Design review3 updates to look over

Needs review

Small details, useful context.

Pro workspaceVerified⌘ KAction neededv2.4.0

Import

import { Badge } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
appearance	`'soft' \| 'outline' \| 'solid'`	—	Controls emphasis independently from semantic color. Omit to preserve the variant’s original treatment.
variant	`'default' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'primary'`	`'default'`	Color scheme of the badge.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Padding and font size.
animation	`'none' \| 'pulse' \| 'shine'`	`'none'`	Adds subtle motion for live states, releases, or highlighted metadata.
dot	`boolean`	`false`	Shows a small colored circle before the label.
leftIcon	`ReactNode`	—	Icon rendered to the left of the text (ignored when dot is true).

Examples

Color and emphasis

import { Badge } from '@velocityuikit/velocityui'

export default function Status() {
  return <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
    <Badge variant="success" appearance="soft" dot>Healthy</Badge>
    <Badge variant="info" appearance="outline">Preview</Badge>
    <Badge variant="primary" appearance="solid">Pro</Badge>
  </div>
}

Variants

import { Badge } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
      <Badge variant="default">Default</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="primary">Primary</Badge>
    </div>
  )
}

With dot

import { Badge } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem' }}>
      <Badge variant="success" dot>Active</Badge>
      <Badge variant="warning" dot>Pending</Badge>
      <Badge variant="danger" dot>Offline</Badge>
    </div>
  )
}

Sizes

import { Badge } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
      <Badge size="sm" variant="info">Small</Badge>
      <Badge size="md" variant="info">Medium</Badge>
      <Badge size="lg" variant="info">Large</Badge>
    </div>
  )
}

Animated statuses

import { Badge } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
      <Badge variant="success" dot animation="pulse">Live</Badge>
      <Badge variant="primary" animation="shine">New release</Badge>
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */