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 "@riversidevalley/fluid";

8 7 6 8 4

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.

This component uses $$restProps.

All unused props will be passed through to the underlying span element as regular attributes.

More Info

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