Mielui · Badge

Installation

pnpm dlx @mielui/svelte add badge

Usage

Providing href renders a link and accepts native anchor attributes such as target, rel, and download. Without href, Badge renders a div and accepts div attributes. An empty href still renders a link. Narrow optional URLs before choosing the linked or static form.

Badges are static metadata by default. Add role="status" explicitly only when changing badge text should be announced as a status update.

import { Badge } from '$lib/mielui/components/badge';

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

Examples

Shapes

Use class to adjust the corner radius. Outline follows the theme’s border width.

Variants

API reference

Badge

Displays a compact status label.

Prop	Type	Default
`variant`	`BadgeVariant \| undefined`	`'secondary'`
`icon`	`Component<{ size?: string \| number \| undefined; class?: string \| undefined; }, {}, string> \| undefined`	`—`
`iconSize`	`string \| number \| undefined`	`13`
`dot`	`boolean \| undefined`	`false`
`children`	`Snippet<[]> \| undefined`	`—`
`class`	`string \| undefined`	`—`
`href`	`string \| undefined`	`—`