mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
7fdc2ef7f0* chore(deps-dev): upgrade `sveld` to v0.18.1 * Run "yarn build:docs" * test: assert that `data-*` attributes are valid
61 lines
1.4 KiB
Svelte
61 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { Button } from "../types";
|
|
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
|
</script>
|
|
|
|
<Button data-test-id="btn">Primary button</Button>
|
|
|
|
<Button kind="secondary">Secondary button</Button>
|
|
|
|
<Button kind="tertiary">Tertiary button</Button>
|
|
|
|
<Button kind="ghost">Ghost button</Button>
|
|
|
|
<Button kind="danger">Danger button</Button>
|
|
|
|
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
|
|
|
<Button kind="danger-ghost">Danger ghost button</Button>
|
|
|
|
<Button icon="{Add}">With icon</Button>
|
|
|
|
<Button
|
|
icon="{Add}"
|
|
tooltipPosition="bottom"
|
|
tooltipAlignment="center"
|
|
iconDescription="Tooltip text"
|
|
/>
|
|
|
|
<Button href="#">Link button</Button>
|
|
|
|
<Button as let:props>
|
|
<p {...props}>Custom element</p>
|
|
</Button>
|
|
|
|
<Button size="field">Primary</Button>
|
|
|
|
<Button size="field" kind="secondary">Secondary</Button>
|
|
|
|
<Button size="field" kind="tertiary">Tertiary</Button>
|
|
|
|
<Button size="field" kind="ghost">Ghost</Button>
|
|
|
|
<Button size="field" kind="danger">Danger</Button>
|
|
|
|
<Button size="small">Primary</Button>
|
|
|
|
<Button size="small" kind="secondary">Secondary</Button>
|
|
|
|
<Button size="small" kind="tertiary">Tertiary</Button>
|
|
|
|
<Button size="small" kind="ghost">Ghost</Button>
|
|
|
|
<Button size="small" kind="danger">Danger</Button>
|
|
|
|
<Button disabled>Disabled button</Button>
|
|
|
|
<Button skeleton />
|
|
|
|
<Button skeleton size="field" />
|
|
|
|
<Button skeleton size="small" />
|