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="ms-2 h-4 w-4 bg-white p-0 font-semibold text-primary-800 dark:bg-white dark:text-primary-800">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="h-6 w-6 text-primary-600 dark:text-primary-400" />
    <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>