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 import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
5
6 const { Story } = defineMeta({
7 title: "UI/ButtonGroup",
8 component: ButtonGroup,
9 tags: ["autodocs"],
10 argTypes: {
11 spaced: { control: "boolean" }
12 },
13 args: {
14 spaced: false
15 }
16 });
17</script>
18
19<!-- ButtonGroup content comes through its `children` snippet, provided here as Story slot content. -->
20<Story name="Joined">
21 <ButtonGroup>
22 <Button>Button</Button>
23 <Button>Button</Button>
24 <Button>Button</Button>
25 </ButtonGroup>
26</Story>
27
28<Story name="Spaced" args={{ spaced: true }}>
29 <ButtonGroup spaced>
30 <Button>Button</Button>
31 <Button>Button</Button>
32 <Button>Button</Button>
33 </ButtonGroup>
34</Story>
35
36<Story name="Comparison">
37 <div class="flex flex-col gap-4">
38 <ButtonGroup spaced>
39 <Button>Button</Button>
40 <Button>Button</Button>
41 <Button>Button</Button>
42 </ButtonGroup>
43 <ButtonGroup>
44 <Button>Button</Button>
45 <Button>Button</Button>
46 <Button>Button</Button>
47 </ButtonGroup>
48 </div>
49</Story>
50
51<!--
52 The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs):
53 the selected segment gets the `default` variant + insetShadow, unselected segments are
54 `ghost`. Never plain `default` for unselected — that reads as the hovered state.
55-->
56<Story name="Tab Switcher">
57 <ButtonGroup>
58 <Button {...segmentProps(true)}>Open</Button>
59 <Button {...segmentProps(false)}>Closed</Button>
60 </ButtonGroup>
61</Story>