Tile UI React
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/react';

export default function BadgeDemo() {
	return (
		<div className="button-group">
			<Badge>Default</Badge>

Registry install

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

Package usage

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

Highlights

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

Registry dependencies

ItemPurpose
badgeComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Badge

PropTypeDefault
variant'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'—
asChildboolean—
PreviousAvatarNextBreadcrumb