Fluent Svelte InfoBadge
Edit This PageInfoBadges 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";
3
7
1
8
6
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
| Name | Type | Default | Description |
|---|---|---|---|
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
| Name | Slot Props | Fallback |
|---|---|---|
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