# ion-badge

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.


<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description                                                                                                                                                                                                                                                            | Type    |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `color`  | `color`   | The 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](/docs/theming/basics). | `Color` |
| `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`  |


## CSS Custom Properties

| Name               | Description                 |
| ------------------ | --------------------------- |
| `--background`     | Background of the badge     |
| `--color`          | Text color of the badge     |
| `--padding-bottom` | Padding bottom of the badge |
| `--padding-end`    | Padding end of the badge    |
| `--padding-start`  | Padding start of the badge  |
| `--padding-top`    | Padding top of the badge    |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
