Working with Badge and Note Components
1. Using IonBadge Component
| Property | Values | Description |
|---|---|---|
| color | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark' |
Color of the badge |
| mode | 'ios', 'md' |
Mode of the badge (iOS or Material Design) |
| text | string |
Text content of the badge |
Example: Badge with Different Colors
<ion-badge color="success">Success</ion-badge>
<ion-badge color="warning">Warning</ion-badge>
<ion-badge color="danger">Danger</ion-badge>2. Positioning Badges
| Property | Values | Description |
|---|---|---|
| position | 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' |
Defines the position of the badge relative to its parent element |
| size | 'small' | 'medium' | 'large' |
Sets the size of the badge |
Example: Badge Positioning
<ion-badge position="top-end">1</ion-badge>
<ion-badge position="bottom-start">2</ion-badge>
Note: The
position property requires the parent element to have position: relative for proper alignment.
3. Displaying Notification Count
| Property | Values | Description |
|---|---|---|
| badge | number |
Number to display on the badge |
| color | primary | secondary | success | warning | danger |
Color of the badge |
| mode | md | ios |
Mode of the badge (Material Design or iOS) |
4. Using IonNote Component
The IonNote component in Ionic is used to display small, contextual notes or additional information within an application. It's typically used for providing hints, tips, or supplementary details that don't require a full modal or dialog.
| Property | Description | Default Value | Notes |
|---|---|---|---|
| color | Sets the color of the note component. | primary |
Can be any valid Ionic color (e.g., primary, secondary, danger) |
| mode | Defines the mode of the component (iOS or Material Design). | md |
Can be ios or md |
| slot | Defines where the component should be placed within a parent element. | start |
Can be start, end, or center |
Example: Basic Usage of IonNote
<ion-item>
<ion-note slot="end">Updated 2 hours ago</ion-note>
</ion-item>Example: IonNote with Color
<ion-item>
<ion-note color="secondary" slot="end">Important</ion-note>
</ion-item>5. Adding Helper Text
Example: Adding Helper Text to Badge Component
<ion-badge>
<span class="badge-text">New</span>
<span class="helper-text">This is helper text</span>
</ion-badge>| Property | Description | Values | Notes |
|---|---|---|---|
| helperText | Text to display as helper text | string |
Optional property to add helper text to badge |
| helperTextClass | Additional CSS classes for helper text | string |
Allows custom styling of helper text |
Note: Helper text is typically used to provide additional context or instructions for the badge component.
Warning: Ensure that helper text does not exceed 100 characters to maintain readability.
6. Styling Badges
| Property | Values | Description |
|---|---|---|
| color | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark' |
Sets the color of the badge |
| mode | 'ios', 'md' |
Applies platform-specific styling |
| size | 'small', 'medium', 'large' |
Adjusts the size of the badge |
Note: The
color property supports all Ionic color aliases and can be customized via CSS variables.7. Creating Dynamic Badges
| Property | Description | Values | Notes |
|---|---|---|---|
| badge | Badge component to display a badge | <ion-badge> |
Used to show a badge with content |
| color | Color of the badge | primary, secondary, tertiary, success, warning, danger, light, medium, dark |
Applies color theme to badge |
| mode | Mode of the badge (ios or md) | ios, md |
Determines the visual style of the badge |
Example: Creating a Dynamic Badge
<ion-badge color="primary">12</ion-badge>
<ion-badge color="danger">New</ion-badge>Example: Badge with Dynamic Content
import { Component } from '@angular/core';
@Component({
selector: 'app-badge-example',
template: '<ion-badge [color]="badgeColor">{{ badgeCount }}</ion-badge>'
})
export class BadgeExample {
badgeColor = 'warning';
badgeCount = 5;
}8. Using Badges in Lists
| Property | Description | Values | Notes |
|---|---|---|---|
| badge.color | Color of the badge | 'primary', 'secondary', 'danger', 'light', 'dark' |
Default is 'primary' |
| badge.text | Text content of the badge | string |
Can be any string value |
| badge.mode | Badge mode for styling | 'md', 'ios' |
Defaults to platform-specific mode |
Example: Badge in List Item
<ion-item>
<ion-label>Item with Badge</ion-label>
<ion-badge slot="end">12</ion-badge>
</ion-item>Example: Badge with Color
<ion-item>
<ion-label>Item with Colored Badge</ion-label>
<ion-badge slot="end" color="danger">New</ion-badge>
</ion-item>
Note: Badges in lists should use
slot="end" to position them correctly.
9. Implementing Badge Animations
| Property | Values | Description |
|---|---|---|
| badgeAnimation | fade, slide, scale |
Defines the animation type for the badge component |
| duration | number |
Animation duration in milliseconds |
| easing | ease-in-out, linear, ease-in, ease-out |
Easing function for the animation |
Example: Badge with Fade Animation
<ion-badge [badgeAnimation]="'fade'" [duration]="300">New</ion-badge>Example: Badge with Slide Animation
<ion-badge [badgeAnimation]="'slide'" [easing]="'ease-in-out'">Updated</ion-badge>
Note: The
badgeAnimation property is only supported in Ionic 7+.
Warning: Animations may not work as expected in older Ionic versions or on some mobile browsers.
10. Configuring Accessibility for Badges
| Property | Values | Description |
|---|---|---|
| aria-label | string |
Defines an accessible name for the badge element. |
| aria-describedby | string |
Associates the badge with a description element via ID. |
| role | badge |
Semantic role to indicate the element is a badge. |
Example: Accessibility Configuration
<ion-badge aria-label="New messages" aria-describedby="message-desc">5</ion-badge>
<span id="message-desc">You have 5 unread messages.</span>Note: Ensure that
aria-label provides sufficient context for screen readers when the badge content alone is not descriptive.