import Props from '@ionic-internal/component-api/v8/badge/props.md'; import Events from '@ionic-internal/component-api/v8/badge/events.md'; import Methods from '@ionic-internal/component-api/v8/badge/methods.md'; import Parts from '@ionic-internal/component-api/v8/badge/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/badge/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/badge/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

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.

import Basic from '@site/static/usage/v8/badge/basic/index.md';

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. :::

import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';

import Colors from '@site/static/usage/v8/badge/theming/colors/index.md';

import CSSProps from '@site/static/usage/v8/badge/theming/css-properties/index.md';