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

    Example headingNew

    Example headingNew

    Example headingNew

    Example headingNew
    Example headingNew
    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

    namedescriptiontypedefault
    colorSets the color context of the component to one of CoreUI’s themed colors.ColorsGradient
    positionPosition badge in one of the corners of a link or button.BadgePositions
    shapeSelect the shape of the component.string
    sizeSize the component small.sm
    textColorSets the text color of the component to one of CoreUI’s themed colors.TextColors
    • 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.2 Code licensed MIT , docs CC BY 3.0 .
    CoreUI PRO requires a commercial license.