Tag

Interactive chip extending Badge with a removable close button. Use for filters, selections, and user-generated labels.

Import

tsx

import { Tag } from '@velocityuikit/velocityui'

Preview

Variants

DefaultInfoSuccessWarningDangerPrimary

Removable

ReactTypeScriptTailwindNext.js

Sizes

SmallMediumLarge

Props

Prop	Type	Default	Description
variant	`'default' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'primary'`	`'default'`	Color variant of the tag.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls padding and font size.
onClose	`() => void`	—	When provided, renders an × close button inside the tag.
leftIcon	`ReactNode`	—	Icon rendered to the left of the label.

Examples

Removable tags

tsx

import { Tag } from '@velocityuikit/velocityui'
import { useState } from 'react'

export default function Example() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Tailwind'])
  return (
    <div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap' }}>
      {tags.map((t) => (
        <Tag key={t} variant="primary" onClose={() => setTags(tags.filter((x) => x !== t))}>
          {t}
        </Tag>
      ))}
    </div>
  )
}

Variants

tsx

import { Tag } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap' }}>
      <Tag>Default</Tag>
      <Tag variant="info">Info</Tag>
      <Tag variant="success">Success</Tag>
      <Tag variant="warning">Warning</Tag>
      <Tag variant="danger">Danger</Tag>
      <Tag variant="primary">Primary</Tag>
    </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:

css

/* 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  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

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