Toast

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

<Toast>Deployment gateway queued.</Toast>

<script lang="ts">
	import Toast from '@tcpsystems/ui/foundation/Toast';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let failed = $state(false);
</script>

<Stack>
	<Button onclick={() => failed = true}>Simulate failed deployment</Button>
	{#if failed}
		<Toast tone="alert">
			Gateway failed its health check. The previous release is still serving.
			{#snippet action()}<Button size="sm" onclick={() => failed = false}>Dismiss</Button>{/snippet}
		</Toast>
	{/if}
</Stack>

<script lang="ts">
	import Toast from '@tcpsystems/ui/foundation/Toast';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let archived = $state(false);
</script>

<Stack>
	<Button disabled={archived} onclick={() => archived = true}>Archive invoice INV-2048</Button>
	{#if archived}
		<Toast>
			Invoice INV-2048 archived.
			{#snippet action()}<Button size="sm" onclick={() => archived = false}>Undo</Button>{/snippet}
		</Toast>
	{/if}
</Stack>