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 andem units.
Example headingNew
Example headingNew
Example headingNew
Example headingNew
Example headingNew
Example headingNew
Loading...
Loading...
Loading...
Loading...
Contextual variations
Add any of the below-mentionedcolor props to modify the presentation of a badge.
Loading...
Loading...
Pill badges
Apply theshape="rounded-pill" prop to make badges rounded.
Loading...
Loading...
Positioned badges
Useposition prop to place ac-badge component it in the corner of a link or button.
Loading...
Loading...
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 | |
position | Position badge in one of the corners of a link or button. | BadgePositions | |
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 |