Button | tcpsystems/ui

Try it

Svelte

<Button variant="primary">Save changes</Button>

Examples

Variants

Variants.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Button variant="primary">Deploy</Button>
	<Button>Preview</Button>
	<Button variant="ghost">Cancel</Button>
	<Button variant="danger">Delete</Button>
</Cluster>

States

A link

States.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Button variant="primary" icon="plus">New project</Button>
	<Button variant="primary" loading loadingLabel="Saving">Save</Button>
	<Button disabled>Disabled</Button>
	<Button href="/components/" iconEnd="arrow-right">A link</Button>
	<Button iconOnly icon="download" aria-label="Download" />
</Cluster>

Sizes

Sizes.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Button size="sm">Small</Button>
	<Button>Medium</Button>
	<Button size="lg">Large</Button>
</Cluster>

API

Import

import Button from '@tcpsystems/ui/foundation/Button';

Prop	Type	Default
`variant?`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	`'secondary'`
`size?`	`'sm' \| 'md' \| 'lg'`	`'md'`
`href?`	`string`	none
`icon?`	`string`	none
`iconEnd?`	`string`	none
`iconOnly?`	`boolean`	`false`
`block?`	`boolean`	`false`
`loading?`	`boolean`	`false`
`loadingLabel?`	`string`	none
`disabled?`	`native`	`false`
`type?`	`native`	`'button'`
`target?`	`native`	none
`rel?`	`native`	none
`track?`	`native`	none

Snippet
`children`

Hook	Kind
`.tcp-button`	Root class
`data-block`	Data attribute
`data-icon-only`	Data attribute
`data-size`	Data attribute
`data-tcp-track`	Data attribute
`data-variant`	Data attribute