Murasaki
コンポーネント

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>);}

使い方

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

API リファレンス

Props

Propデフォルト
variant"default" | "secondary" | "outline" | "destructive""default"

Badge<div> をレンダリングし、それ以外の props(classNameonClick など)は すべてそのまま渡されます。

GitHub でこのページを改善

On this page