Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Button from "./Button.svelte";
const { Story } = defineMeta({ title: "UI/Button", component: Button, tags: ["autodocs"], argTypes: { variant: { control: { type: "select" }, options: ["default", "primary", "ghost", "danger", "success", "warning"] }, size: { control: { type: "inline-radio" }, options: ["sm", "md", "lg"] }, insetShadow: { control: "boolean" }, disabled: { control: "boolean" }, loading: { control: "boolean" } }, args: { variant: "default", size: "md", insetShadow: false, disabled: false, loading: false } });</script>
<!-- Button content comes through its `children` snippet, provided here as Story slot content. --><Story name="Default">Button</Story><Story name="Primary" args={{ variant: "primary" }}>Save</Story><Story name="Ghost" args={{ variant: "ghost" }}>Cancel</Story><Story name="Danger" args={{ variant: "danger" }}>Delete</Story><Story name="Success" args={{ variant: "success" }}>Confirm</Story><Story name="Warning" args={{ variant: "warning" }}>Careful</Story><Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story><Story name="Disabled" args={{ disabled: true }}>Button</Story><Story name="Link" args={{ href: "/" }}>Go home</Story>
<Story name="Inset shadow" asChild> <div class="flex items-center gap-3"> <Button insetShadow>Button</Button> <Button variant="primary" insetShadow>Save</Button> </div></Story>
<Story name="Sizes" asChild> <div class="flex items-center gap-3"> <Button size="sm">Small</Button> <Button size="md">Medium</Button> <Button size="lg">Large</Button> </div></Story>