Skip to main content

Badge

Badge​

Description: The Badge component is a versatile element used to highlight key information. It can display content such as labels, counts, or indicators with optional icons on either side.

Usage:


import React from 'react';
import Badge from 'blendx-ui/Badge';

const MyBadge = () => (
  <Badge variant="success" size="lg" icon="check-circle" type="left-icon">
    Success
  </Badge>
);

export default MyBadge;

Props:

  • as (elementType): Specifies the element type for the component (default: span).
  • variant (string): Visual style of the badge (options: primary, secondary, success, danger, warning, info, light, dark; default: primary).
  • pill (bool): If true, applies a pill style to the badge, making it more rounded (default: false).
  • bsPrefix (string): Overrides the underlying component base CSS class name (default: badge).
  • children (node): The content to be displayed inside the badge.
  • size (string): Size of the badge, determining the font and icon size (default: md).
  • icon (string): Class name of the icon to display inside the badge.
  • type (string): Position or type of the icon (options: left-icon, right-icon, with-dot; default: left-icon).

Example:


<Badge variant="danger" size="sm" icon="exclamation-circle" type="right-icon">
  Alert
</Badge>

Dependencies​

RepositoryUsage Count
frontend-app-staff-dashboard11
frontend-app-dashboard11
frontend-app-course-authoring5
frontend-app-account2
frontend-app-learning1
frontend-app-profile3

Detailed usage locations:​

frontend-app-staff-dashboard

  • src/components/CourseCard.jsx
  • src/components/ProfileCardLarge.jsx
  • src/components/ProfileDrawer.jsx
  • src/components/ProgramCard.jsx
  • src/pages/billing/index.jsx
  • src/pages/notifications/index.jsx
  • src/pages/program-single/fee-statistics/index.jsx
  • src/pages/support/index.jsx
  • src/pages/users/index.jsx
  • src/pages/users/teams/TeamSingle.jsx
  • src/pages/users/teams/index.jsx

frontend-app-dashboard

  • src/components/ActiveTickets.jsx
  • src/components/AiTutor.jsx
  • src/components/CartDrawer.jsx
  • src/components/CourseExploreCard.jsx
  • src/components/Notes.jsx
  • src/components/ProfileCardLarge.jsx
  • src/components/ProgramCard.jsx
  • src/components/RecentActivityCard.jsx
  • src/pages/notifications/index.jsx
  • src/pages/support/index.jsx
  • src/pages/support/view-ticket/TicketHeader.jsx

frontend-app-course-authoring

  • src/course-outline/section-card/SectionCard.jsx
  • src/fee-statistics/index.jsx
  • src/group-configurations/common/TitleButton.jsx
  • src/schedule-and-details/details-section/index.jsx
  • src/studio-home/card-item/index.jsx

frontend-app-account

  • src/components/CartDrawer.jsx
  • src/components/ProfileCardLarge.jsx

frontend-app-learning

  • src/course-home/outline-tab/OutlineTab.jsx

frontend-app-profile

  • src/BlendxProfile/tabs/Purchases.jsx
  • src/components/CartDrawer.jsx
  • src/components/ProfileCardLarge.jsx