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 Button from "./Button.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Button",
7 component: Button,
8 tags: ["autodocs"],
9 argTypes: {
10 variant: {
11 control: { type: "select" },
12 options: ["default", "primary", "ghost", "danger", "success", "warning"]
13 },
14 size: {
15 control: { type: "inline-radio" },
16 options: ["sm", "md", "lg"]
17 },
18 insetShadow: { control: "boolean" },
19 disabled: { control: "boolean" },
20 loading: { control: "boolean" }
21 },
22 args: {
23 variant: "default",
24 size: "md",
25 insetShadow: false,
26 disabled: false,
27 loading: false
28 }
29 });
30</script>
31
32<!-- Button content comes through its `children` snippet, provided here as Story slot content. -->
33<Story name="Default">Button</Story>
34<Story name="Primary" args={{ variant: "primary" }}>Save</Story>
35<Story name="Ghost" args={{ variant: "ghost" }}>Cancel</Story>
36<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
37<Story name="Success" args={{ variant: "success" }}>Confirm</Story>
38<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
39<Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story>
40<Story name="Disabled" args={{ disabled: true }}>Button</Story>
41<Story name="Link" args={{ href: "/" }}>Go home</Story>
42
43<Story name="Inset shadow" asChild>
44 <div class="flex items-center gap-3">
45 <Button insetShadow>Button</Button>
46 <Button variant="primary" insetShadow>Save</Button>
47 </div>
48</Story>
49
50<Story name="Sizes" asChild>
51 <div class="flex items-center gap-3">
52 <Button size="sm">Small</Button>
53 <Button size="md">Medium</Button>
54 <Button size="lg">Large</Button>
55 </div>
56</Story>