Badge: Blazor badge component

Examples

Inline

Inline renders a standalone badge; Color follows the theme.

Draft New Pro plan Beta Trial Active Past due Cancelled Internal

website/Examples/DataDisplay/BadgeInlineExample.razor Source

Overlay

Wrap any element to pin a count on it; Max caps numbers, Dot shows a plain dot and Bordered rings it.

3 99+

website/Examples/DataDisplay/BadgeOverlayExample.razor Source

Visibility

Bind Visible to hide the badge when there is nothing to count.

website/Examples/DataDisplay/BadgeVisibilityExample.razor Source

Playground

New

ChildContent

Color Color

Inline

Dot

Bordered

Visible

<Badge Color="Color.Secondary" Inline="true">New</Badge>

API

<Badge>

DaisyBlazor

Parameters

Bordered bool
= false
Adds a border-2 border-base-100 ring around the badge.
Color Color
= Color.Primary
Badge color mapped to a daisyUI badge-* class; defaults to Primary.
Content object
= null
Badge content (number or text). Capped by Max when numeric.
Dot bool
= false
Render a small dot with no content.
Inline bool
= false
Render a plain inline .badge (Content and/or ChildContent as its text) instead of the indicator overlay.
Max int
= 99
Maximum numeric value before showing "{Max}+"; applies to any number or numeric string.
Overlap bool
= false
Pulls the overlay badge inward so it overlaps the child's corner instead of sitting centred on it.
Visible bool
= true
Shows the badge; when false the badge is hidden but child content still renders. Defaults to true.
Class string
= null
Extra CSS classes on the indicator wrapper, or on the badge itself in inline mode.
Style string
= null
Inline CSS style on the indicator wrapper, or on the badge itself in inline mode.

Name	Type	Default	Description
Bordered	bool	false	Adds a border-2 border-base-100 ring around the badge.
Color	Color	Color.Primary	Badge color mapped to a daisyUI badge-* class; defaults to Primary.
Content	object	null	Badge content (number or text). Capped by Max when numeric.
Dot	bool	false	Render a small dot with no content.
Inline	bool	false	Render a plain inline .badge (Content and/or ChildContent as its text) instead of the indicator overlay.
Max	int	99	Maximum numeric value before showing "{Max}+"; applies to any number or numeric string.
Overlap	bool	false	Pulls the overlay badge inward so it overlaps the child's corner instead of sitting centred on it.
Visible	bool	true	Shows the badge; when false the badge is hidden but child content still renders. Defaults to true.
Class	string	null	Extra CSS classes on the indicator wrapper, or on the badge itself in inline mode.
Style	string	null	Inline CSS style on the indicator wrapper, or on the badge itself in inline mode.

Content

ChildContent RenderFragment
Content the badge overlays (indicator mode) or extra badge text (inline mode).

Name	Type	Description
ChildContent	RenderFragment	Content the badge overlays (indicator mode) or extra badge text (inline mode).

From MudBadge

Badge keeps MudBadge's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.