mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
6fc0ab3290* feat(button): adopt v11 styles - forward focus and blur events - provide button role for custom elements using 'as' BREAKING CHANGE: danger-tertiary and danger-ghost props were renamed to danger--tertiary and danger--ghost BREAKING CHANGE: buttons now have a larger minimum width * test: update button test
61 lines
1.3 KiB
Svelte
61 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { Button } from "../package";
|
|
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
|
</script>
|
|
|
|
<Button>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" />
|