Angular Badge

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

On this page

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

| 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` | |