Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Badge

ion-badge

Improve this doc

Badges 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 predefined color to use. For example: "primary", "secondary", "danger".

mode string

The mode to apply to this component. Mode can be ios, wp, or md.

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

Related

Badges Component Docs

API

Native

General