alice.pds.demo.boltless.dev
This repository has no description
web/components: add icon stories to Button
the icon prop had no coverage, so nothing showed the gap, the icon's size step
at lg, or how a pressed icon sinks with its label. adds left, right, icon-only,
per-size and inset-shadow icon stories, plus an iconSide control.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 30, 2026, 7:45 PM +0300)
commit
eb4bec96
eb4bec96584d0ca2edc01c85f3be2a4b3c0669bb
parent
a093a2fc
a093a2fc367459390dda10473cc6a1dd191f0c6e
change-id
tznzpqxv
tznzpqxvtmkwkmnnvlzpvtwoumrkvpqx
+31
+31
web/src/lib/components/ui/Button.stories.svelte
+31
web/src/lib/components/ui/Button.stories.svelte
···
1
1
<script module lang="ts">
2
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";
3
6
import Button from "./Button.svelte";
4
7
5
8
const { Story } = defineMeta({
···
15
18
control: { type: "inline-radio" },
16
19
options: ["sm", "md", "lg"]
17
20
},
21
+
iconSide: {
22
+
control: { type: "inline-radio" },
23
+
options: ["left", "right"]
24
+
},
18
25
insetShadow: { control: "boolean" },
19
26
disabled: { control: "boolean" },
20
27
loading: { control: "boolean" }
···
22
29
args: {
23
30
variant: "default",
24
31
size: "md",
32
+
iconSide: "left",
25
33
insetShadow: false,
26
34
disabled: false,
27
35
loading: false
···
54
62
<Button size="lg">Large</Button>
55
63
</div>
56
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>