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 ChevronRight from "$icon/chevron-right";
4 import GitFork from "$icon/git-fork";
5 import Star from "$icon/star";
6 import Button from "./Button.svelte";
7
8 const { Story } = defineMeta({
9 title: "UI/Button",
10 component: Button,
11 tags: ["autodocs"],
12 argTypes: {
13 variant: {
14 control: { type: "select" },
15 options: ["default", "primary", "ghost", "danger", "success", "warning"]
16 },
17 size: {
18 control: { type: "inline-radio" },
19 options: ["sm", "md", "lg"]
20 },
21 iconSide: {
22 control: { type: "inline-radio" },
23 options: ["left", "right"]
24 },
25 insetShadow: { control: "boolean" },
26 disabled: { control: "boolean" },
27 loading: { control: "boolean" }
28 },
29 args: {
30 variant: "default",
31 size: "md",
32 iconSide: "left",
33 insetShadow: false,
34 disabled: false,
35 loading: false
36 }
37 });
38</script>
39
40<!-- Button content comes through its `children` snippet, provided here as Story slot content. -->
41<Story name="Default">Button</Story>
42<Story name="Primary" args={{ variant: "primary" }}>Save</Story>
43<Story name="Ghost" args={{ variant: "ghost" }}>Cancel</Story>
44<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
45<Story name="Success" args={{ variant: "success" }}>Confirm</Story>
46<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
47<Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story>
48<Story name="Disabled" args={{ disabled: true }}>Button</Story>
49<Story name="Link" args={{ href: "/" }}>Go home</Story>
50
51<Story name="Inset shadow" asChild>
52 <div class="flex items-center gap-3">
53 <Button insetShadow>Button</Button>
54 <Button variant="primary" insetShadow>Save</Button>
55 </div>
56</Story>
57
58<Story name="Sizes" asChild>
59 <div class="flex items-center gap-3">
60 <Button size="sm">Small</Button>
61 <Button size="md">Medium</Button>
62 <Button size="lg">Large</Button>
63 </div>
64</Story>
65
66<Story name="With icon" args={{ icon: Star }}>Star</Story>
67<Story name="Icon right" args={{ icon: ChevronRight, iconSide: "right" }}>Next</Story>
68<Story name="Icon only" args={{ icon: Star, "aria-label": "Star" }} />
69
70<!-- the icon rides the same gap and scales with the size variant: size-4 up to lg, size-5 at lg. -->
71<Story name="Icon sizes" asChild>
72 <div class="flex items-center gap-3">
73 <Button size="sm" icon={Star}>Small</Button>
74 <Button size="md" icon={Star}>Medium</Button>
75 <Button size="lg" icon={Star}>Large</Button>
76 </div>
77</Story>
78
79<!-- press these: the icon and label sink together while the button box stays put. -->
80<Story name="Icons with inset shadow" asChild>
81 <div class="flex items-center gap-3">
82 <Button insetShadow icon={Star}>Star</Button>
83 <Button variant="primary" insetShadow icon={GitFork}>Fork</Button>
84 <Button insetShadow icon={ChevronRight} iconSide="right">Next</Button>
85 <Button insetShadow icon={Star} aria-label="Star" />
86 </div>
87</Story>