mielui
Status and content

Badge

A compact label for status, counts, and tags.

Installation

pnpm dlx @mielui/svelte add badge

Usage

Set href to render a link that accepts anchor attributes such as target, rel, and download. Without it, Badge renders a div. An empty href still renders a link, so narrow optional URLs before passing them.

Badges are static by default. Add role="status" only when a change to the badge text should be announced.

<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge>New</Badge>
<Badge variant="outline" dot>Label</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="error">Failed</Badge>

Examples

Status list

A badge at the end of each row reports the state of that row.

Shapes

Badges are small flat pills that share one height. Only the outline variant draws a hairline. Use class to change the corner radius or make a square count.

Variants

Icon

icon takes a Svelte component and renders it before the text. The component receives size and class, so any icon component with those two props works. iconSize sets that size in pixels and defaults to 13. For anything else, such as a count, put it in children next to the text.

The example wraps a Hugeicons icon in a small component, pencil-icon.svelte:

<script lang="ts">
    import { PencilEdit02Icon } from '@hugeicons/core-free-icons';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let {
        size = 13,
        class: className
    }: {
        size?: number | string;
        class?: string;
    } = $props();
</script>

<HugeiconsIcon icon={PencilEdit02Icon} {size} class={className} />

API reference

Badge

Displays a compact status label.

  • variant
    BadgeVariant

    Color and emphasis. Status variants pair their color with your text.

    Default 'secondary'

  • icon
    Component<{ size?: string | number | undefined; class?: string | undefined; }, {}, string>

    Icon component shown before the label.

  • iconSize
    string | number

    Icon size in pixels.

    Default 13

  • dot
    boolean

    Shows a small status dot before the label.

    Default false

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    string

    Classes added to the element.

  • href
    string

    Renders the badge as a link to this address.