Core UI
Badge / Tag Set
Single pill component covering solid, soft, and outline badge variants across brand and semantic tones, with an optional removable tag mode.
$ velocityx add badge-tagBuilt for astro.
Full docs for Badge / Tag Set →
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| tone | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | No | 'primary' | |
| variant | 'solid' | 'soft' | 'outline' | No | 'soft' | |
| size | 'sm' | 'md' | No | 'md' | |
| removable | boolean | No | false | |
| dot | boolean | No | false |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/badge-tag/BadgeTag.astroUsing the Badge / Tag Set component
Install it with velocityx add badge-tag.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Core UI.
Single avatar or an overlapping stack with a plus-N overflow chip, falling back to deterministic initials-over-tint when no image is given.
astroStatic breadcrumb trail with BreadcrumbList microdata that collapses the middle segments into an ellipsis on long paths.
astroOne button primitive covering primary/secondary/ghost/destructive variants, three sizes, a loading spinner state, and an icon-only mode.
astroCentred placeholder for an empty list, table, or panel with an icon slot, title, description, and action slot.
astro