Banner

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

<Banner title="Maintenance tonight">Deployments pause from 22:00 to 22:15 UTC.</Banner>

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

<Stack>
	<Banner tone="neutral" title="Retention policy">Build logs are kept for 30 days.</Banner>
	<Banner tone="accent" title="Preview environments">Every pull request now gets a preview.</Banner>
	<Banner tone="info" title="Runner update">New builds use Node 24.</Banner>
	<Banner tone="ok" title="Migration complete">All projects are ready.</Banner>
	<Banner tone="warn" title="Certificate expiring">Renew the certificate within seven days.</Banner>
	<Banner tone="danger" title="Deployment blocked" dismissLabel="Dismiss warning">Restore a healthy build before promoting.</Banner>
</Stack>

<script lang="ts">
	import Banner from '@tcpsystems/ui/foundation/Banner';
	import Button from '@tcpsystems/ui/foundation/Button';
	let paused = $state(true);
</script>

<Banner tone={paused ? 'warn' : 'ok'} title={paused ? 'Sync paused' : 'Sync resumed'}>
	{paused ? 'Invoice updates are waiting for approval.' : 'Invoice updates are being processed.'}
	{#snippet action()}
		<Button size="sm" disabled={!paused} onclick={() => paused = false}>Resume sync</Button>
	{/snippet}
</Banner>

<script lang="ts">
	import '@tcpsystems/ui/foundation/elements/banner';
	import Banner from '@tcpsystems/ui/foundation/Banner';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let revision = $state(0);
</script>

<Stack>
	{#key revision}
		<Banner title="Preview ready" dismissLabel="Dismiss preview announcement">
			Your team can review the latest gateway build.
		</Banner>
	{/key}
	<Button size="sm" onclick={() => revision++}>Show announcement again</Button>
</Stack>