Tile UI Vue
Source code

Components

Badge

A small status or label indicator with multiple visual variants.

Use Badge to surface status, counts, or short labels next to content.

DefaultSecondaryDestructiveOutlineGhostLink
import { Badge } from '@tile-ui/vue';
 
export default function BadgeDemo() {
	return (
		<div class="button-group">
			<Badge>Default</Badge>

Registry install

pnpm dlx shadcn@latest add @tile-ui/badge

Package usage

import { Badge } from '@tile-ui/vue';
 
<Badge variant="secondary">New</Badge>

Highlights

  • Six visual variants
  • asChild support for composition
  • Pairs with Avatar, Item, and Table

Registry dependencies

Item Purpose
badge Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Badge

Prop Type Default
variant 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' —
asChild boolean —
PreviousAvatarNextBreadcrumb