Badge

<Badge>My Badge</Badge>

<script lang="ts">
	import { Badge } from 'svelte-5-ui-lib';
	import { CheckCircleOutline } from 'flowbite-svelte-icons';
</script>

<div class="flex h-8 justify-center">
	<Badge dismissable>
		Default
		{#snippet icon()}
			<CheckCircleOutline class="h-5 w-5" />
		{/snippet}
	</Badge>
</div>

<script lang="ts">
	import { Badge } from 'svelte-5-ui-lib';
	let eventStatus = $state(true);
	function handleClose() {
		// console.log('Badge dismissed');
		alert('Badge dismissed');
		eventStatus = false;
	}
</script>

<div class="flex h-8 justify-center">
	<Badge dismissable large onclick={handleClose} bind:badgeStatus={eventStatus}>Default</Badge>
</div>

<script lang="ts">
	import { Button, Indicator } from 'svelte-5-ui-lib';
	import { EnvelopeFlowbite } from 'svelte-animated-icons';
</script>

<div class="flex justify-center gap-4">
	<Button class="relative" size="sm">
		<EnvelopeFlowbite class="text-white dark:text-white" />
		<span class="sr-only">Notifications</span>
		<Indicator color="blue" border size="xl" placement="top-right" class="text-xs font-bold"
			>18</Indicator
		>
	</Button>

	<Button class="relative" size="sm">
		<EnvelopeFlowbite />
		<span class="sr-only">Notifications</span>
		<Indicator color="red" border size="xl" placement="top-right" class="text-xs font-bold"
			>20</Indicator
		>
	</Button>

	<Button class="relative" size="sm">
		<EnvelopeFlowbite class="text-white dark:text-white" />
		<span class="sr-only">Notifications</span>
		<Indicator color="sky" border size="xl" placement="bottom-right" class="text-xs font-bold"
			>20</Indicator
		>
	</Button>
</div>

<script lang="ts">
	import { Badge, Button } from 'svelte-5-ui-lib';
</script>

<div class="flex justify-center">
	<Button>
		Messages
		<Badge
			rounded
			class="text-primary-800 dark:text-primary-800 ms-2 h-4 w-4 bg-white p-0 font-semibold dark:bg-white"
			>2</Badge
		>
	</Button>
</div>

<script lang="ts">
	import { Badge } from 'svelte-5-ui-lib';
	import { CheckFlowbite, InfoCircleFlowbite, UserCircleFlowbite } from 'svelte-animated-icons';
</script>

<div class="flex justify-center gap-2">
	<Badge color="gray" rounded large class="!p-1 !font-semibold">
		<CheckFlowbite class="h-6 w-6" />
		<span class="sr-only">Icon description</span>
	</Badge>
	<Badge rounded large class="!p-1 !font-semibold">
		<InfoCircleFlowbite class="text-primary-600 dark:text-primary-400 h-6 w-6" />
		<span class="sr-only">Icon description</span>
	</Badge>
	<Badge rounded large color="blue" class="!p-1 !font-semibold">
		<UserCircleFlowbite class="h-6 w-6 text-blue-600 dark:text-blue-400" />
		<span class="sr-only">Icon description</span>
	</Badge>
</div>

<script lang="ts">
	import { Badge, Button } from 'svelte-5-ui-lib';
	let openBadgeStatus = $state(false);
	function openBadge() {
		openBadgeStatus = true;
	}
</script>

<Button onclick={openBadge}>Open badge</Button>
<Badge class="ml-4" color="blue" dismissable large bind:badgeStatus={openBadgeStatus}>Default</Badge
>

<script lang="ts">
	import { Badge, type BadgeProps } from 'svelte-5-ui-lib';

	setInterval(handleHover, 500);

	let color = $state('primary') as BadgeProps['color'];
	function handleHover() {
		color = color === 'primary' ? 'secondary' : 'primary';
	}
</script>

<Badge large {color}>Blinking badge</Badge>