ToggleButton | tcpsystems/ui

Try it

Svelte

<ToggleButton pressed={false}>Pin deployment</ToggleButton>

Examples

Toggle

Toggle.svelte

<script lang="ts">
	import ToggleButton from '@tcpsystems/ui/foundation/ToggleButton';
	let pinned = $state(false);
</script>

<ToggleButton bind:pressed={pinned}>Pin deployment</ToggleButton>

With icon

With icon.svelte

<script lang="ts">
	import ToggleButton from '@tcpsystems/ui/foundation/ToggleButton';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	let pinned = $state(true);
	let watching = $state(false);
</script>

<Cluster>
	<ToggleButton bind:pressed={pinned} icon="check" size="sm" variant="primary">Pin deployment</ToggleButton>
	<ToggleButton bind:pressed={watching} icon="info" iconOnly size="lg" variant="ghost" aria-label="Watch deployment" />
</Cluster>

Loading

Loading.svelte

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

<ToggleButton loading disabled loadingLabel="Saving preference…">Pin deployment</ToggleButton>

Disabled

Disabled.svelte

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

<Cluster>
	<ToggleButton disabled>Pin deployment</ToggleButton>
	<ToggleButton pressed disabled>Watch deployment</ToggleButton>
</Cluster>

API

Import

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

Prop	Type	Default
`pressed?`	`boolean`	`$bindable(false)`
`variant?`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	`'secondary'`
`size?`	`'sm' \| 'md' \| 'lg'`	`'md'`
`icon?`	`string`	none
`iconEnd?`	`string`	none
`iconOnly?`	`boolean`	`false`
`block?`	`boolean`	`false`
`loading?`	`boolean`	`false`
`loadingLabel?`	`string`	none
`disabled?`	`native`	`false`
`type?`	`native`	`'button'`

Snippet
`children`

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