Yami UI

Displays a badge or a component that looks like one.

Badge

Installation

Add the badge component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/badge.json

Usage

import { Badge } from "@/components/ui/badge"

<Badge>Badge</Badge>

Examples

Variants

DefaultSecondaryOutlineDestructiveBrand

Code

import { Badge } from "@/components/ui/badge"

<div className="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge className="bg-yami-primary text-white hover:bg-yami-primary/90">Brand</Badge>
</div>

Brand

New

Code

import { Badge } from "@/components/ui/badge"

<Badge className="bg-yami-primary text-white hover:bg-yami-primary/90">New</Badge>