Indicator

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

	let count = $state(3);
</script>

<Indicator label={`${count} unread messages`} {count}>
	<Button onclick={() => count = 0}>Inbox</Button>
</Indicator>

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

<Cluster gap="lg">
	<Indicator label="2 queued deployments" count={2} tone="neutral">Queued</Indicator>
	<Indicator label="4 new deployments" count={4} tone="accent">New</Indicator>
	<Indicator label="8 healthy services" count={8} tone="ok">Healthy</Indicator>
	<Indicator label="3 expiring certificates" count={3} tone="warn">Expiring</Indicator>
	<Indicator label="1 failed deployment" count={1} tone="danger">Failed</Indicator>
	<Indicator label="6 scheduled jobs" count={6} tone="info">Scheduled</Indicator>
</Cluster>

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

<Cluster gap="lg">
	<Indicator label="No unread alerts" count={0}><Button disabled>Alerts</Button></Indicator>
	<Indicator label="Deployment activity"><Button href="/components/status/">Activity</Button></Indicator>
</Cluster>