How do I change the color of a Badge?

Set the color prop to one of 'information', 'attention', 'warning', 'success', or 'critical' to communicate different statuses and priorities.

What is the difference between Badge and BadgeIcon?

Badge is a general-purpose badge that can contain text, counts, or an icon. BadgeIcon is optimized for showing an icon in the form of a badge without the extra padding the Badge component adds, and is used internally by Avatar.

How do I render an icon inside a Badge?

Pass the icon to the icon prop, either as a snippet or as an icon component.

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.

5 5 5 5 5 5 5 5 36 48 64

Usage

<script>
	import { Badge } from 'fluentui-svelte';
</script>

<Badge>36</Badge>

Badge API

A brief explanation of the props that really need explaining. You can see the rest of the props here.

Appearance

Use the appearance prop to switch between filled, outline, tint, and ghost styles.

View Code

5 5 5 5

Sizes

Use the size prop to control the badge dimensions.

View Code

46 56 64 96

Shapes

Use the shape prop to render circular, rounded, or square badges.

View Code

36 36 36

Color

Use the color prop to communicate different statuses and priorities.

View Code

I A W C S

Icon

Use the icon prop to render an icon inside the badge. You can pass the icon as a snippet or as a component.

Only icon?

If you use this component and notice padding between the wrapper and the icon, use the BadgeIcon component instead to avoid it.

View Code

Badge Props

Name	Type	Description
`size`	`number`	The size of the badge in pixels.
`shape`	`string`	The shape of the badge. Possible values: 'circular', 'rounded', 'square'.
`appearance`	`string`	The appearance of the badge. Possible values: 'filled', 'outline', 'ghost', 'tint'.
`iconPosition`	`string`	The position of the icon inside the badge. Possible values: 'before', 'after'.
`color`	`string`	The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'.
`icon`	`Snippet` \| `Component`	The icon to display inside the badge.
`ref`	`HTMLSpanElement`	The DOM reference of the badge element.
`children`	`Snippet`	The children elements to render inside the badge.

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	Description
`size`	`number`	The size of the badge in pixels.
`color`	`string`	The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'.
`icon`	`Snippet` \| `Component`	The icon to display inside the badge.
`ref`	`HTMLSpanElement`	The DOM reference of the badge element.