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 color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.

mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

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