InfoBadge

Edit This Page

InfoBadges are a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert.

import { InfoBadge } from "fluent-svelte";
4 4 2 1 2

Usage

Severity

InfoBadges can take in a severity prop, which represent the type of information you wish to convey to the user. The default severity is attention.

Severity Preview
attention
information
success
caution
critical

Custom Content

The default badge glyph can be overrided with your own content. This can be useful if you wish display text, or an alert count. Passing HTML content into the default slot will override the glyph with said content.

99 bazinga
<InfoBadge>99</InfoBadge>
<InfoBadge severity="critical">bazinga</InfoBadge>

Component API

API docs automatically generated by sveld and vite-plugin-sveld.

Props

NameTypeDefaultDescription
severity string "attention" Indicates the severity color of the badge.
element null | HTMLSpanElement null Obtains a bound DOM reference to the badge's element.

Slots

NameSlot PropsFallback
Unnamed (Default) {} {#if severity === "attention"} <svg {...svgProps} viewBox="162 118 701 789"> <path fill="currentColor" d="M862.5,680C862.5,687.333 861.083,694.25 858.25,700.75C855.417,707.25 851.583,712.917 846.75,717.75C841.917,722.583 836.25,726.417 829.75,729.25C823.25,732.083 816.333,733.5 809,

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

None