alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Settings from "$icon/settings";
4 import ButtonCard from "./ButtonCard.svelte";
5
6 const { Story } = defineMeta({
7 title: "UI/ButtonCard",
8 component: ButtonCard,
9 tags: ["autodocs"],
10 argTypes: {
11 variant: {
12 control: { type: "select" },
13 options: ["default", "ghost"]
14 },
15 disabled: { control: "boolean" },
16 title: { control: "text" },
17 description: { control: "text" }
18 },
19 args: {
20 variant: "default",
21 disabled: false,
22 title: "Button",
23 description: "Description"
24 }
25 });
26</script>
27
28<Story name="Default" />
29<Story name="Ghost" args={{ variant: "ghost" }} />
30<Story name="WithIcon" args={{ icon: Settings }} />
31<Story name="Disabled" args={{ disabled: true }} />
32<Story name="Href" args={{ href: "/", icon: Settings }} />
33
34<Story name="Variants">
35 <div class="grid grid-cols-2 gap-3">
36 <ButtonCard variant="default" icon={Settings} title="Default" description="Bordered card" />
37 <ButtonCard variant="ghost" icon={Settings} title="Ghost" description="Transparent card" />
38 </div>
39</Story>