Badge
The Badge component displays small status indicators, counts, or labels.
Import
<script>
import { Badge } from 'svelte-fluentui';
</script>svelte
Basic Usage
<Badge>New</Badge>svelte
Color Variants
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>svelte
Number Badge
<Badge>{unreadCount}</Badge>svelte
Properties
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'warning' | 'error' | 'info' | 'default' | Badge color variant |
size | 'small' | 'medium' | 'large' | 'medium' | Badge size |
Events
| Event | Description |
|---|---|
on:click | Fired when the badge is clicked |