Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Badge Component

Angular badge component is small count and labeling component.

## Usage ```typescript import { BadgeModule } from '@coreui/angular'; @NgModule({ imports: [BadgeModule,] }) export class AppModule(){} ``` ## 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 ```typescript import { BadgeModule } from '@coreui/angular'; @NgModule({ imports: [BadgeModule,] }) export class AppModule(){} ``` --- ### 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` | |