About
A small pill-shaped label for showing a short status or category tag, with neutral, accent, success, warning and danger tone variants. Ported to React from MillaiUI's Vue MBadge component by Millai Studio.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MBadge to your project and fits it to your theme.
Code
How MBadge is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import MBadge from "@/components/ui/mbadge";
export default function MBadgeTonesDemo() {
return (
<div className="flex flex-wrap items-center gap-2">
<MBadge tone="neutral">Neutral</MBadge>
<MBadge tone="accent">Accent</MBadge>
<MBadge tone="success">完了</MBadge>
<MBadge tone="warning">確認中</MBadge>
<MBadge tone="danger">Danger</MBadge>
</div>
);
}
More by millaistudio
View all
M Button
MListItem
MCard