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", "flat", "danger", "success", "warning"]
13 },
14 size: {
15 control: { type: "inline-radio" },
16 options: ["sm", "md", "lg"]
17 },
18 disabled: { control: "boolean" },
19 loading: { control: "boolean" }
20 },
21 args: {
22 variant: "default",
23 size: "md",
24 disabled: false,
25 loading: false
26 }
27 });
28</script>
29
30<!-- Button content comes through its `children` snippet, provided here as Story slot content. -->
31<Story name="Default">Button</Story>
32<Story name="Primary" args={{ variant: "primary" }}>Save</Story>
33<Story name="Ghost" args={{ variant: "ghost" }}>Cancel</Story>
34<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
35<Story name="Success" args={{ variant: "success" }}>Confirm</Story>
36<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
37<Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story>
38<Story name="Disabled" args={{ disabled: true }}>Button</Story>
39<Story name="Link" args={{ href: "/" }}>Go home</Story>
40
41<Story name="Sizes">
42 <div class="flex items-center gap-3">
43 <Button size="sm">Small</Button>
44 <Button size="md">Medium</Button>
45 <Button size="lg">Large</Button>
46 </div>
47</Story>