73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import { Badge } from "@ai-ui/ui";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
|
|
const meta = {
|
|
title: "Components/Badge",
|
|
component: Badge,
|
|
args: {
|
|
children: "Stable",
|
|
size: "md",
|
|
tone: "neutral",
|
|
variant: "subtle"
|
|
},
|
|
argTypes: {
|
|
asChild: {
|
|
control: "boolean"
|
|
},
|
|
children: {
|
|
control: "text"
|
|
},
|
|
className: {
|
|
control: false
|
|
},
|
|
size: {
|
|
control: "radio",
|
|
options: ["sm", "md"]
|
|
},
|
|
tone: {
|
|
control: "select",
|
|
options: ["neutral", "primary", "success", "warning", "destructive"]
|
|
},
|
|
variant: {
|
|
control: "radio",
|
|
options: ["subtle", "solid", "outline"]
|
|
}
|
|
},
|
|
parameters: {
|
|
layout: "centered"
|
|
},
|
|
tags: ["autodocs"]
|
|
} satisfies Meta<typeof Badge>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {};
|
|
|
|
export const Matrix: Story = {
|
|
render: () => (
|
|
<div className="grid w-[720px] gap-4">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Badge>Neutral</Badge>
|
|
<Badge tone="primary">Primary</Badge>
|
|
<Badge tone="success">Success</Badge>
|
|
<Badge tone="warning">Warning</Badge>
|
|
<Badge tone="destructive">Destructive</Badge>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Badge variant="outline">Outline</Badge>
|
|
<Badge tone="primary" variant="outline">
|
|
Brand
|
|
</Badge>
|
|
<Badge tone="success" variant="solid">
|
|
Shipped
|
|
</Badge>
|
|
<Badge size="sm" tone="warning" variant="solid">
|
|
Needs review
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|