Badge
ion-badge
ion-badgeBadges are simple components in Ionic containing numbers or text. You can display a badge to indicate that there is new information associated with the item it is on.
Input Properties
| Attr | Type | Details |
|---|---|---|
| color | string |
The color to use from your Sass |
| mode | string |
The mode determines which platform styles to use.
Possible values are: |
Sass Variables
| Property | Default | Description |
|---|---|---|
$badge-font-size |
1.3rem |
Font size of the badge |
$badge-font-weight |
bold |
Font weight of the badge |
| Property | Default | Description |
|---|---|---|
$badge-ios-border-radius |
10px |
Border radius of the badge |
$badge-ios-background-color |
color($colors-ios, primary) |
Background color of the badge |
$badge-ios-text-color |
color-contrast($colors-ios, $badge-ios-background-color) |
Text color of the badge |
| Property | Default | Description |
|---|---|---|
$badge-md-border-radius |
4px |
Border radius of the badge |
$badge-md-background-color |
color($colors-md, primary) |
Background color of the badge |
$badge-md-text-color |
color-contrast($colors-md, $badge-md-background-color) |
Text color of the badge |
| Property | Default | Description |
|---|---|---|
$badge-wp-border-radius |
0 |
Border radius of the badge |
$badge-wp-background-color |
color($colors-wp, primary) |
Background color of the badge |
$badge-wp-text-color |
color-contrast($colors-wp, $badge-wp-background-color) |
Text color of the badge |