Badge
badge.svelteSmall, inline elements used to display status, counts, or labels.
Demo
Example
Usage
001 <script lang="ts">
002 import Badge from '$lib/components/badge.svelte';
003 </script>
004
005 <div class="flex flex-row flex-wrap gap-2">
006 <Badge>Example</Badge>
007 </div>
008
badge.svelte
001 <script lang="ts" module>
002 import type { HTMLAttributes } from 'svelte/elements';
003
004 export type BadgeProps = HTMLAttributes<HTMLElement> & {
005 ref?: HTMLSpanElement | null;
006 };
007 </script>
008
009 <script lang="ts">
010 let { class: className, ref = $bindable(null), children, ...restProps }: BadgeProps = $props();
011 </script>
012
013 <span class={`badge ${className ?? ''}`} bind:this={ref} {...restProps}>
014 {@render children?.()}
015 </span>
016
017 <style>
018 .badge {
019 min-height: var(--line);
020 display: inline-block;
021 max-width: fit-content;
022 background-color: var(--border-default);
023 color: var(--text-primary);
024 padding-left: 1ch;
025 padding-right: 1ch;
026 }
027 </style>
028