Badge

A small label for status, category, or metadata.

npx shadcn@latest add @silicon-ui/badge
labelstatus
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/badge

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/badge/badge.tsx
    • components/silicon-ui/badge/badge.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Badge } from "@/components/silicon-ui/badge/badge";

API reference

PropTypeDefault
toneBadgeTone

"danger""info""success""warning""neutral"

"neutral"
sizeBadgeSize

"sm""md"

"md"
iconReactNode—

Also accepts the props of HTMLAttributes<HTMLSpanElement>.

Dependencies

npm
motion
Registry
silicon-motion-tokens