# Badge

Inline status pill with optional dot marker. 9 variants (5 intents + 4 statuses). Optionally renders as anchor when href is provided.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add badge
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Badge

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| variant | BadgeVariant \| undefined | 'secondary' | No | No | Color and emphasis. Status variants pair their color with your text. |
| icon | Component<{ size?: string \| number \| undefined; class?: string \| undefined; }, {}, string> \| undefined | - | No | No | Icon component shown before the label. |
| iconSize | string \| number \| undefined | 13 | No | No | Icon size in pixels. |
| dot | boolean \| undefined | false | No | No | Shows a small status dot before the label. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| class | string \| undefined | - | No | No | Classes added to the element. |
| href | string \| undefined | - | No | No | Renders the badge as a link to this address. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Component, Snippet } from 'svelte';
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
import Badge from './badge.svelte';

export type BadgeVariant =
    | 'primary'
    | 'secondary'
    | 'ghost'
    | 'outline'
    | 'destructive'
    | 'info'
    | 'success'
    | 'warning'
    | 'error';

type BadgeSharedProps = {
    /** Color and emphasis. Status variants pair their color with your text. */
    variant?: BadgeVariant;
    /** Icon component shown before the label. */
    icon?: Component<{ size?: number | string; class?: string }>;
    /** Icon size in pixels. */
    iconSize?: number | string;
    /** Shows a small status dot before the label. */
    dot?: boolean;
    /** Content rendered inside. */
    children?: Snippet;
} & DefaultProps;

type BadgeLinkProps = BadgeSharedProps & {
    /** Renders the badge as a link to this address. */
    href: string;
} & Omit<HTMLAnchorAttributes, keyof BadgeSharedProps | 'href'>;

type BadgeStaticProps = BadgeSharedProps & {
    /** Renders the badge as a link to this address. */
    href?: undefined;
} & Omit<HTMLAttributes<HTMLDivElement>, keyof BadgeSharedProps> & {
        [Attribute in Exclude<
            keyof HTMLAnchorAttributes,
            keyof HTMLAttributes<HTMLDivElement>
        >]?: never;
    };

export type BadgeProps = BadgeLinkProps | BadgeStaticProps;

export { Badge };
export default Badge;
~~~~

## Examples

### Hero

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

    const deployments = [
        {
            name: 'Production',
            detail: 'main · 2 minutes ago',
            label: 'Live',
            variant: 'success'
        },
        {
            name: 'Preview',
            detail: 'feat/billing · building',
            label: 'Building',
            variant: 'info'
        },
        {
            name: 'Staging',
            detail: 'release/0.3 · 1 hour ago',
            label: 'Failed',
            variant: 'error'
        },
        {
            name: 'Archive',
            detail: 'v0.1 · last month',
            label: 'Paused',
            variant: 'outline'
        }
    ] as const;
</script>

<ul class="m-0 flex w-full max-w-sm list-none flex-col gap-3 p-0">
    {#each deployments as deployment (deployment.name)}
        <li class="flex items-center justify-between gap-4">
            <span class="flex min-w-0 flex-col">
                <span class="truncate text-sm font-medium text-foreground">{deployment.name}</span>
                <span class="truncate text-sm text-foreground-muted">{deployment.detail}</span>
            </span>
            <Badge variant={deployment.variant}>{deployment.label}</Badge>
        </li>
    {/each}
</ul>
~~~~

### 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} />
~~~~

### Shapes

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

<div class="flex flex-wrap items-center gap-2">
    <Badge>Beta</Badge>
    <Badge class="size-6 px-0 py-0 tabular-nums">8</Badge>
    <Badge class="rounded-[var(--radius-sm)]">Draft</Badge>
    <Badge variant="outline" class="rounded-[calc(var(--radius-sm)/2)]">Live</Badge>
</div>
~~~~

### Variants

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

<div class="flex max-w-lg flex-wrap items-center justify-center gap-3">
    <Badge variant="primary">Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="ghost">Ghost</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="destructive">Destructive</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="error">Error</Badge>
</div>
~~~~

### With Icon

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
    import PencilIcon from './pencil-icon.svelte';
</script>

<div class="flex flex-wrap items-center gap-2">
    <Badge icon={PencilIcon}>Draft</Badge>
    <Badge variant="outline" icon={PencilIcon} iconSize={12}>Edited</Badge>
</div>
~~~~

For the rendered reference, visit [/docs/components/badge](/docs/components/badge).