Tag

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

<Cluster>
	<Tag>Production</Tag>
	<Tag>Owner operated</Tag>
</Cluster>

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

<Tag href="/components/status/">Deployment status</Tag>

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

	let filters = $state(['Production', 'Falkenstein']);
</script>

<Cluster>
	{#each filters as filter (filter)}
		<Tag removeLabel={`Remove ${filter} filter`} onremove={() => filters = filters.filter((value) => value !== filter)}>{filter}</Tag>
	{:else}
		<p role="status">All deployments are visible.</p>
	{/each}
	<Button size="sm" onclick={() => filters = ['Production', 'Falkenstein']}>Reset filters</Button>
</Cluster>