# Badge Badge displays concise contextual information such as counts, statuses or notifications. It is commonly attached to other interface elements to draw attention without interrupting the user experience. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-badge--introduction ## Variants documented in Storybook - Badges: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-badge--badges ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Badge. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Badges — Dot Badges HTML: ```html ``` React: ```jsx import React from 'react'; const BadgeExample1Demo = () => ( <> {/* Variant: Dot Badge - Primary */} {/* Variant: Dot Badge - Success */} {/* Variant: Dot Badge - Warning */} {/* Variant: Dot Badge - Danger */} {/* Variant: Dot Badge - Info */} {/* Variant: Dot Badge - Tertiary */} {/* Variant: Dot Badge - Neutral */} {/* Variant: Dot Badge - Secondary */} ); export default BadgeExample1Demo; ``` Angular: ```html ``` ### 2. Badges — Icon Badges HTML: ```html ``` React: ```jsx import React from 'react'; const BadgeExample2Demo = () => ( <> {/* Variant: Icon Badge - Primary Check */} check {/* Variant: Icon Badge - Secondary Notifications */} notifications {/* Variant: Icon Badge - Success Star */} star {/* Variant: Icon Badge - Warning */} warning {/* Variant: Icon Badge - Danger Close */} close {/* Variant: Icon Badge - Info */} info ); export default BadgeExample2Demo; ``` Angular: ```html ``` ### 3. Badges — Digit Badges HTML: ```html 1 3 11 22 99+ 100 ``` React: ```jsx import React from 'react'; const BadgeExample3Demo = () => ( <> {/* Variant: Digit Badge - Primary - Single */} 1 {/* Variant: Digit Badge - Neutral - Single */} 3 {/* Variant: Digit Badge - Info - Double */} 11 {/* Variant: Digit Badge - Success - Double */} 22 {/* Variant: Digit Badge - Danger - Overflow */} 99+ {/* Variant: Digit Badge - Warning - Triple */} 100 ); export default BadgeExample3Demo; ``` Angular: ```html 1 3 11 22 99+ 100 ``` ### 4. Introduction — Introduction HTML: ```html

Components

Badge

Badge displays concise contextual information such as counts, statuses or notifications. It is commonly attached to other interface elements to draw attention without interrupting the user experience.

Visual Showcase

Explore the core styles and animation variants available in the design system.

Dot Badges

Primary

Success

Danger

Icon Badges

Check

Warning

Error

Digit Badges

1 Single

11 Double

99+ Overflow

CSS Class Reference

Quickly copy the necessary utility classes to implement badges in your project.

Badge Variant Classes

Semantic Variant	Dot Class	Icon Class	Digit Class
primary	`ux4g-badge-dot-primary`	`ux4g-badge-icon-primary`	`ux4g-badge-digit-primary`
secondary	`ux4g-badge-dot-secondary`	`ux4g-badge-icon-secondary`	`ux4g-badge-digit-secondary`
tertiary	`ux4g-badge-dot-tertiary`	`ux4g-badge-icon-tertiary`	`ux4g-badge-digit-tertiary`
success	`ux4g-badge-dot-success`	`ux4g-badge-icon-success`	`ux4g-badge-digit-success`
warning	`ux4g-badge-dot-warning`	`ux4g-badge-icon-warning`	`ux4g-badge-digit-warning`
danger	`ux4g-badge-dot-danger`	`ux4g-badge-icon-danger`	`ux4g-badge-digit-danger`
info	`ux4g-badge-dot-info`	`ux4g-badge-icon-info`	`ux4g-badge-digit-info`
neutral	`ux4g-badge-dot-neutral`	`ux4g-badge-icon-neutral`	`ux4g-badge-digit-neutral`

``` React: ```jsx import React from 'react'; const BadgeExample4Demo = () => ( <>

Components

Badge

Visual Showcase

Explore the core styles and animation variants available in the design system.

{/* Dot Showcase */}

Dot Badges

Primary

Success

Danger

{/* Icon Showcase */}

Icon Badges

check Check

warning Warning

close Error

{/* Digit Showcase */}

Digit Badges

1 Single

11 Double

99+ Overflow

CSS Class Reference

Quickly copy the necessary utility classes to implement badges in your project.

{/* Variant Classes (Grid) */}

Badge Variant Classes

Semantic Variant	Dot Class	Icon Class	Digit Class
primary	`ux4g-badge-dot-primary`	`ux4g-badge-icon-primary`	`ux4g-badge-digit-primary`
secondary	`ux4g-badge-dot-secondary`	`ux4g-badge-icon-secondary`	`ux4g-badge-digit-secondary`
tertiary	`ux4g-badge-dot-tertiary`	`ux4g-badge-icon-tertiary`	`ux4g-badge-digit-tertiary`
success	`ux4g-badge-dot-success`	`ux4g-badge-icon-success`	`ux4g-badge-digit-success`
warning	`ux4g-badge-dot-warning`	`ux4g-badge-icon-warning`	`ux4g-badge-digit-warning`
danger	`ux4g-badge-dot-danger`	`ux4g-badge-icon-danger`	`ux4g-badge-digit-danger`
info	`ux4g-badge-dot-info`	`ux4g-badge-icon-info`	`ux4g-badge-digit-info`
neutral	`ux4g-badge-dot-neutral`	`ux4g-badge-icon-neutral`	`ux4g-badge-digit-neutral`

); export default BadgeExample4Demo; ``` Angular: ```html

Components

Badge

Visual Showcase

Explore the core styles and animation variants available in the design system.

Dot Badges

Primary

Success

Danger

Icon Badges

Check

Warning

Error

Digit Badges

1 Single

11 Double

99+ Overflow

CSS Class Reference

Quickly copy the necessary utility classes to implement badges in your project.

Badge Variant Classes

Semantic Variant	Dot Class	Icon Class	Digit Class
primary	`ux4g-badge-dot-primary`	`ux4g-badge-icon-primary`	`ux4g-badge-digit-primary`
secondary	`ux4g-badge-dot-secondary`	`ux4g-badge-icon-secondary`	`ux4g-badge-digit-secondary`
tertiary	`ux4g-badge-dot-tertiary`	`ux4g-badge-icon-tertiary`	`ux4g-badge-digit-tertiary`
success	`ux4g-badge-dot-success`	`ux4g-badge-icon-success`	`ux4g-badge-digit-success`
warning	`ux4g-badge-dot-warning`	`ux4g-badge-icon-warning`	`ux4g-badge-digit-warning`
danger	`ux4g-badge-dot-danger`	`ux4g-badge-icon-danger`	`ux4g-badge-digit-danger`
info	`ux4g-badge-dot-info`	`ux4g-badge-icon-info`	`ux4g-badge-digit-info`
neutral	`ux4g-badge-dot-neutral`	`ux4g-badge-icon-neutral`	`ux4g-badge-digit-neutral`

``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.