Note

A note is a short piece of muted, smaller text for metadata, such as a count, a size, or a timestamp beside a list item.

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

Basic usage

<IonNote>Last updated 5 minutes ago</IonNote>

In an item

Put the note in an IonItem's End slot to show metadata at the trailing edge of the row.

@* Metadata at the trailing edge of a row: put the note in the End slot. *@
<IonList>
    <IonItem>
        <ChildContent>
            <IonLabel>Storage used</IonLabel>
        </ChildContent>
        <End>
            <IonNote>12.4 GB</IonNote>
        </End>
    </IonItem>
    <IonItem>
        <ChildContent>
            <IonLabel>Version</IonLabel>
        </ChildContent>
        <End>
            <IonNote>2.1.0</IonNote>
        </End>
    </IonItem>
</IonList>

Colors

Color sets the text to a palette color — see Theming.

<IonNote Color="primary">Primary</IonNote>
<IonNote Color="secondary">Secondary</IonNote>
<IonNote Color="tertiary">Tertiary</IonNote>
<IonNote Color="success">Success</IonNote>
<IonNote Color="warning">Warning</IonNote>
<IonNote Color="danger">Danger</IonNote>
<IonNote Color="medium">Medium</IonNote>
<IonNote Color="dark">Dark</IonNote>

API

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

IonNote

Parameter	Type	Default	Description
Color	string?	null	Named palette color (Ionic color): "primary", "danger", …. Stamped as an ion-color-* class the stylesheet maps to the text color.

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

Styling

Theme tokens

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

Token	Type	md	ios
Color	Color	#666666	#a6a6a6
FontSize	float	14	14

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-note	The note host. Also carries the mode (md / ios).
.ion-color, .ion-color-{name}	Color (e.g. .ion-color-success).