Badge

Note: Badges have been deprecated. Instead please use Chips.

Example

<vega-badge
        bg-color='bg-accent6-tertiary'
        text-color='text-danger-link-visited'
        text='any text'
        size='default'
></vega-badge>

Usage

Badges are small icons with colored backgrounds with a text overlay. They are used when a specific element in a design needs to be highlighted or if items need to be differentiated from each other.

Badges consist of a background and a label, and are used primarily to engage users on a page.

Types of Badges

Stepped instructions on a page
Notifications
Trust badges
Gamification awards

Properties

Name	Description	Default
bg-color	This is an optional attribute that contains the background color of the badge. To use this, use an existing color token. Optional	bg-accent6-tertiary
text-color	This is an optional attribute that contains the color of the text on the badge. To use this, use an existing color token. Optional	text-danger-link-visited
text	This is the text that will be displayed on the badge. Required	-
size	The size of the badge	default

All Parameters

<vega-badge 
  bg-color='any color token' 
  text-color='any color token'
  text='any text'
  size='default|large|small'
>
</vega-badge>

For more details, view in Storybook

Accessibility

Color contrast between background and foreground meet WCAG AA requirements.
Each ID value must remain unique.

Best Practices

Badges should generally be used sparingly on the page, as they are designed to draw the viewer’s attention. For notification purposes, the colors should be kept simple: Red for errors, yellow for alerts, green for success, and blue for casual usage. Text should be short on badges, no more than 2-3 words.

Don't