Ion-badge - Ionic Framework

Home » What Is An Icon Badge » Ion-badge - Ionic Framework

Maybe your like

shadow

Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. Badges are hidden if no content is passed in.

Basic Usage​

AngularJavaScriptReactVueiOSMD

Badges in Tab Buttons​

Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.

info

Empty badges are only available for md mode.

AngularJavaScriptReactVueiOSMD

Theming​

Colors​

AngularJavaScriptReactVueiOSMD

CSS Properties​

AngularJavaScriptReactVueiOSMD

Properties​

color​

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Defaultundefined

mode​

DescriptionThe mode determines which platform styles to use.This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" ｜ "md"
Defaultundefined

Events​

No events available for this component.

Methods​

No public methods available for this component.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

  • iOS
  • MD
NameDescription
--backgroundBackground of the badge
--colorText color of the badge
--padding-bottomBottom padding of the badge
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the badge
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
--padding-topTop padding of the badge
NameDescription
--backgroundBackground of the badge
--colorText color of the badge
--padding-bottomBottom padding of the badge
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the badge
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
--padding-topTop padding of the badge

Slots​

No slots available for this component.

Tag » What Is An Icon Badge