On this page

Angular Badge Component

Angular badge component is small count and labeling component.

## Example Badge component scales to suit the size of the parent element by using relative font sizing and `em` units.

## Contextual variations Add any of the below-mentioned `color` props to modify the presentation of a badge.

## Pill badges Apply the `shape="rounded-pill"` prop to make badges rounded.

## Positioned badges Use `position` prop to place a `c-badge` component it in the corner of a link or button.

## API ### Badge Module

### Badge Standalone

--- ### c-badge _component_ #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `color` | Sets the color context of the component to one of CoreUI’s themed colors.| [`ColorsGradient`](../types/coreui_types.ColorsGradient.md) | | | `position` | Position badge in one of the corners of a link or button. | [`BadgePositions`](../types/coreui_types.BadgePositions.md) | | | `shape` | Select the shape of the component. | `string` | | | `size` | Size the component small. | `sm` | | | `textColor` | Sets the text color of the component to one of CoreUI’s themed colors. | `TextColors` | |