CoreUI Angular Logo
Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
Getting startedIntroductionSupport CoreUICustomizeSassOptionsCSS VariablesLayoutBreakpointsContainersGridColumnsGuttersFormsOverviewAutocompletePRODate PickerPRODate Range PickerPROForm ControlSelectMulti SelectPROChecks & RadiosPassword InputPRORangeRange SliderPRORatingPROStepperPROInput GroupFloating LabelsLayoutTime PickerPROValidationComponentsAccordionAlertAvatarBadgeBreadcrumbButtonButton GroupCalendarPROCalloutCardCarouselClose buttonCollapseDropdownFooterHeaderImageList GroupLoading ButtonPROModalNavNavbarOffcanvasPaginationPlaceholderPopoverProgressSmart PaginationPROSmart TablePROSidebarSpinnerTableTabsNewToastTooltipWidgetsIconsChartsTemplatesNewAdmin & DashboardDownloadInstallationCustomizeContentMigrationv4 → v5v3 → v4Angular version
DownloadHire UsGet CoreUI PRO
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.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Loading...
Loading...
Loading...
Loading...

Contextual variations

Add any of the below-mentioned color props to modify the presentation of a badge.

primarysuccessdangerwarninginfolightdark
Loading...
Loading...

Pill badges

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

primarysuccessdangerwarninginfolightdark
Loading...
Loading...

Positioned badges

Use position prop to place a c-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
  • GitHub
  • Twitter
  • Support
  • CoreUI (Vanilla)
  • CoreUI for React.js
  • CoreUI for Vue.js

CoreUI for Angular is Open Source UI Components Library for Angular.

Currently v5.5.17 Code licensed MIT , docs CC BY 3.0 .
CoreUI PRO requires a commercial license.