Badge

A badge is a small pill of bold text, usually a count or a short status, shown next to another element to flag new or pending content.

IonBadge is an inline-block span that wraps its child content.

Basic usage

A badge does not wrap its text and is filled with the primary color by default. A badge with no content is hidden.

<IonBadge>99+</IonBadge>
<IonBadge>New</IonBadge>

In an item

Put a badge in an IonItem's End slot for a trailing count, or in the Start slot to lead the row. A badge after the label in the default slot also ends up at the trailing edge, because the label grows to fill the row.

<IonList>
    <IonItem>
        <ChildContent>
            <IonLabel>Inbox</IonLabel>
        </ChildContent>
        <End>
            <IonBadge>@_unread</IonBadge>
        </End>
    </IonItem>
    <IonItem>
        <Start>
            <IonBadge Color="success">New</IonBadge>
        </Start>
        <ChildContent>
            <IonLabel>Release notes</IonLabel>
        </ChildContent>
    </IonItem>
</IonList>

@code {
    private int _unread = 12;
}

Colors

Color fills the badge with a palette color and uses the matching contrast text (dark text on light, success, and warning) — see Theming.

<IonBadge Color="primary">11</IonBadge>
<IonBadge Color="secondary">22</IonBadge>
<IonBadge Color="tertiary">33</IonBadge>
<IonBadge Color="success">44</IonBadge>
<IonBadge Color="warning">55</IonBadge>
<IonBadge Color="danger">66</IonBadge>
<IonBadge Color="light">77</IonBadge>
<IonBadge Color="medium">88</IonBadge>
<IonBadge Color="dark">99</IonBadge>

In tab buttons

A badge inside a tab button floats over the top corner of the icon with smaller, tab-specific metrics, and in md mode an empty badge shows as a dot instead of being hidden. See Tabs.

API

Every component also accepts Class (extra CSS classes), Style (an inline Style object) and Id (the root element's id) — see Conventions.

IonBadge

Parameter	Type	Default	Description
Color	string?	null	Named palette color (Ionic color): "primary", "danger", ....

Slot	Type	Description
ChildContent	RenderFragment?	Content placed between the component's tags.

Styling

Theme tokens

Theme token IonicTheme.Badge (BadgeToken). Assign only the values you want to change — the rest keep the mode defaults below. App-wide: builder.AddIonic(o => o.Theme.Badge = new BadgeToken { … }); for one subtree: a ConfigProvider. See Theming.

Token	Type	md	ios
Background	Color	#0054e9	#0054e9
BorderRadius	float	4	10
Color	Color	#ffffff	#ffffff
FontSize	float	13	13
MinWidth	float	10	10
PaddingBottom	float	4	3
PaddingEnd	float	4	8
PaddingStart	float	4	8
PaddingTop	float	3	3

CSS classes

App stylesheet rules always win over Ionic's own rules (see Theming), so these classes can be targeted directly from GlobalStyles.cs.

Selector	Element
.ion-badge	The badge host. Also carries the mode (md / ios).
.ion-color, .ion-color-{name}	Color (e.g. .ion-color-danger).

// GlobalStyles.cs — pill-shaped badges app-wide
[".ion-badge"] = new()
{
    BorderRadius = new BorderRadius(999),
},