Button

<script lang="ts">
	import { Button } from 'bits-ui';
	import { Check, Download, Trash2 } from '@lucide/svelte';

	let action = $state('Choose an action');
</script>

<div class="space-y-5">
	<div class="flex flex-wrap items-center gap-3">
		<Button.Root class="btn btn-primary gap-2" onclick={() => (action = 'Changes saved')}>
			<Check class="size-4" /> Save changes
		</Button.Root>
		<Button.Root class="btn gap-2 border border-ink-700 bg-ink-850 hover:bg-ink-800" onclick={() => (action = 'Report downloaded')}>
			<Download class="size-4" /> Download report
		</Button.Root>
		<Button.Root class="btn btn-ghost gap-2 text-accent-500" onclick={() => (action = 'Draft deleted')}>
			<Trash2 class="size-4" /> Delete draft
		</Button.Root>
		<Button.Root class="btn btn-primary" disabled>Publishing…</Button.Root>
	</div>
	<p class="text-sm text-ink-400" aria-live="polite">{action}</p>
</div>

<script lang="ts">
	import { Button } from 'bits-ui';
	import { ArrowRight, ExternalLink } from '@lucide/svelte';
</script>

<div class="grid gap-4 sm:grid-cols-2">
	<div class="card p-4">
		<p class="mb-1 text-sm font-medium text-ink-50">Navigation action</p>
		<p class="mb-4 text-xs text-ink-400">Passing href makes the root render an anchor while retaining the button skin.</p>
		<Button.Root href="/components/command" class="btn btn-primary gap-2">
			Explore Command <ArrowRight class="size-4" />
		</Button.Root>
	</div>
	<div class="card p-4">
		<p class="mb-1 text-sm font-medium text-ink-50">External destination</p>
		<p class="mb-4 text-xs text-ink-400">Standard anchor attributes pass through to the rendered element.</p>
		<Button.Root
			href="https://wiki.bits.loca.zone/components/button"
			target="_blank"
			rel="noreferrer"
			class="btn gap-2 border border-ink-700 bg-ink-850 hover:bg-ink-800"
		>
			Local Button guide <ExternalLink class="size-4" />
		</Button.Root>
	</div>
</div>