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 ArrowRight from "$icon/arrow-right";
4 import ExternalLink from "$icon/external-link";
5 import Link from "./Link.svelte";
6
7 const { Story } = defineMeta({
8 title: "UI/Link",
9 component: Link,
10 tags: ["autodocs"],
11 argTypes: {
12 variant: {
13 control: { type: "select" },
14 options: ["default", "success", "warning", "danger"]
15 },
16 size: {
17 control: { type: "inline-radio" },
18 options: ["regular", "small"]
19 },
20 disabled: { control: "boolean" }
21 },
22 args: {
23 variant: "default",
24 size: "regular",
25 disabled: false
26 }
27 });
28</script>
29
30<!-- Link content comes through its `children` snippet, provided here as Story slot content. -->
31<Story name="Default">Link</Story>
32<Story name="Success" args={{ variant: "success" }}>Confirmed</Story>
33<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
34<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
35<Story name="Small" args={{ size: "small" }}>Small link</Story>
36<Story name="Disabled" args={{ disabled: true }}>Link</Story>
37
38<Story name="IconLeft" args={{ iconLeft: ExternalLink }}>Open in new tab</Story>
39<Story name="IconRight" args={{ iconRight: ArrowRight }}>Continue</Story>
40
41<Story name="Href" args={{ href: "/" }}>Go home</Story>