Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script module>
import { BarbiTheme, Button } from '$lib';
import { defineMeta } from '@storybook/addon-svelte-csf';
const { Story } = defineMeta({
title: 'Components/Atoms/Button',
component: Button,
});
</script>
<Story name="Simple Button">
{#snippet children(args)}
<BarbiTheme />
<Button {...args}>Click Me</Button>
{/snippet}
</Story>
<Story name="Button Variants">
{#snippet children(args)}
<BarbiTheme />
<div class="storyboard-grid">
<Button {...args} variant="primary">Primary</Button>
<Button {...args} variant="secondary">Secondary</Button>
<Button {...args} variant="success">Success</Button>
<Button {...args} variant="error">Error</Button>
</div>
{/snippet}
</Story>
<Story name="Link Button">
{#snippet children(args)}
<BarbiTheme />
<Button href="https://example.com" {...args}>I have a href</Button>
{/snippet}
</Story>
<Story name="Disabled Button">
{#snippet children(args)}
<BarbiTheme />
<Button disabled {...args}>You cant click me</Button>
{/snippet}
</Story>
<Story name="Invisible Button">
{#snippet children(args)}
<BarbiTheme />
<p>There is a button on this page, but you can't see it. Use the `placeholder` prop to create a button that occupies only vertical space,
with no interaction available. Useful for reserving space.</p>
<Button placeholder {...args}>You aren't able to see this button at all!</Button>
{/snippet}
</Story>
<style>
.storyboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: max-content;
gap: var(--spacing-md);
}
</style>