Murasaki

Badge

Displays a badge or a component that looks like a badge.

Default
Secondary
Outline
Destructive
import { Badge } from "@murasakijs/ui";export function BadgeDemo() {return (  <div className="flex flex-wrap items-center gap-3">    <Badge variant="default">Default</Badge>    <Badge variant="secondary">Secondary</Badge>    <Badge variant="outline">Outline</Badge>    <Badge variant="destructive">Destructive</Badge>  </div>);}

Usage

import { Badge } from "@murasakijs/ui";
<Badge>Badge</Badge>

API Reference

Props

PropTypeDefault
variant"default" | "secondary" | "outline" | "destructive""default"

Badge renders a <div>; all other props (className, onClick, ...) are forwarded to it.

Improve this page on GitHub

On this page