Badge
A badge is a visual decoration for UI elements used to display notifications, status indicators, or counts. It supports different colors and styles to match various UI needs.
Usage
<script>
import { Badge } from 'fluentui-svelte';
</script>
<Badge>36</Badge>Appearance
Use the appearance prop to switch between filled, outline, tint, and ghost styles.
Sizes
Use the size prop to control the badge dimensions.
Shapes
Use the shape prop to render circular, rounded, or square badges.
Color
Use the color prop to communicate different statuses and priorities.
Icon
Use the icon prop to render an icon inside the badge. You can pass the icon as a snippet or as a component.
Badge Props
| Name | Type | Default | Description |
|---|---|---|---|
size | number | 20 | The size of the badge in pixels. |
shape | 'circular' | 'rounded' | 'square' | 'circular' | The badge can have a circular, rounded or square shape. |
appearance | 'filled' | 'outline' | 'ghost' | 'tint' | 'filled' | The badge can have its background and border styled for greater emphasis or to be subtle. |
iconPosition | 'before' | 'after' | 'before' | The position of the icon relative to the badge content. |
color | Colors | 'information' | The color of the badge. For now it only supports system colors. |
icon | Snippet | Component | Icon to render inside the badge. | |
ref bindable | HTMLSpanElement | The DOM reference of the badge element. | |
| HTML Attributes |
BadgeIcon API
This component is useful when you want to show an icon in the form of a Badge somewhere in your app.
Usage
<script>
import { BadgeIcon } from 'fluentui-svelte';
import { AccessibilityRegular } from 'fluentui-icons-svelte';
</script>
<BadgeIcon size={96} icon={AccessibilityRegular} />One example is using this component inside Avatar:
By default, Avatar uses an instance of BadgeIcon. As you can see, the first example on the left uses the Badge component, which adds unwanted padding inside it. In Avatar, you can use one of the predefined BadgeIcon options, or set a custom icon by passing it as a property. When you use the component option, the styles are applied automatically, but with #snippet you need to make sure you pass the arguments to the icon like this:
<script>
import { Avatar, Badge } from 'fluentui-svelte';
import { AccessibilityRegular } from 'fluentui-icons-svelte';
</script>
<!-- args: [size: number, shape: string] -->
{#snippet customBadge(args)}
<Badge color="attention" size={args.width} aria-hidden={args['aria-hidden']} icon={AccessibilityRegular} />
{/snippet}
<Avatar active="active" size={96} name="FluentUI Svelte" badge={{ icon: customBadge }} />BadgeIcon Props
| Name | Type | Default | Description |
|---|---|---|---|
status | Statuses | 'available' | The presence status to display. It picks both the icon and the color of the badge. |
outOfOffice | boolean | false | Decorates the presence icon to signal that the person is out of office. |
size | number | 20 | The size of the badge in pixels. |
color | Colors | Overrides the color the status would pick on its own. | |
icon | Snippet | Component | Custom icon, rendered instead of the one the status would pick on its own. | |
ref bindable | HTMLSpanElement | The DOM reference of the badge element. | |
| HTML Attributes |