SplitButton

<script lang="ts">
	import SplitButton from '@tcpsystems/ui/foundation/SplitButton';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let format = $state('No export requested');
</script>

<Stack>
	<SplitButton id={uid} label="Export CSV" menuLabel="Export options"
		onclick={() => format = 'CSV export requested'}
		items={[
			{ label: 'Export JSON', onselect: () => format = 'JSON export requested' },
			{ separator: true },
			{ label: 'Email report', disabled: true }
		]} />
	<p role="status">{format}</p>
</Stack>

<script lang="ts">
	import SplitButton from '@tcpsystems/ui/foundation/SplitButton';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let status = $state('Deployment retained');
</script>

<Stack>
	<SplitButton id={uid} label="Delete deployment" menuLabel="Retention options" variant="danger"
		onclick={() => status = 'Deployment deleted'}
		items={[
			{ label: 'Archive deployment', onselect: () => status = 'Deployment archived' },
			{ label: 'Delete build logs', tone: 'danger', onselect: () => status = 'Build logs deleted' }
		]} />
	<p role="status">{status}</p>
</Stack>