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 insetShadow: { control: "boolean" },
16 disabled: { control: "boolean" },
17 title: { control: "text" },
18 description: { control: "text" }
19 },
20 args: {
21 variant: "default",
22 insetShadow: false,
23 disabled: false,
24 title: "Button",
25 description: "Description"
26 }
27 });
28</script>
29
30<Story name="Default" />
31<Story name="Ghost" args={{ variant: "ghost" }} />
32<Story name="WithIcon" args={{ icon: Settings }} />
33<Story name="Disabled" args={{ disabled: true }} />
34<Story name="Href" args={{ href: "/", icon: Settings }} />
35<Story name="Inset shadow" args={{ insetShadow: true, icon: Settings }} />
36
37<Story name="Variants">
38 <div class="grid grid-cols-2 gap-3">
39 <ButtonCard variant="default" icon={Settings} title="Default" description="Bordered card" />
40 <ButtonCard variant="ghost" icon={Settings} title="Ghost" description="Transparent card" />
41 </div>
42</Story>