Tile UISolid
Source code

Tile UI · SolidJS

CSR · SSR · SSG

Badge

A SolidJS status or label indicator with multiple visual variants.

SolidSSR readyRegistryBreakingPreview
import { Badge } from '@tile-ui/solid';

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

Use Badge in SolidJS status surfaces, counts, or short labels.

Registry install

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

Package usage

import { Badge } from '@tile-ui/solid';

<Badge variant="secondary">New</Badge>

Highlights

  • Six visual variants
  • Native Solid span attributes
  • Pairs with Card and status surfaces

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' —