BwBadge | bw-badge

Overview

Badges are used to show a small amount of information.

Usage

Button

Add the button attribute to render the entire badge as a button

Badge

<bw-badge button>Badge</bw-badge>

Colors

BadgeBadgeBadgeBadgeBadgeBadgeBadge

<bw-badge color="gray">Badge</bw-badge>
<bw-badge color="blue">Badge</bw-badge>
<bw-badge color="green">Badge</bw-badge>
<bw-badge color="orange">Badge</bw-badge>
<bw-badge color="purple">Badge</bw-badge>
<bw-badge color="red">Badge</bw-badge>
<bw-badge color="teal">Badge</bw-badge>

Sizes

BadgeBadgeBadge

<bw-badge color="blue" size="sm">Badge</bw-badge>
<bw-badge color="blue" size="md">Badge</bw-badge>
<bw-badge color="blue" size="lg">Badge</bw-badge>

Variants

BadgeBadgecircleWith IconcircleWith Icon and closeclose

<bw-badge color="blue" size="md" type="box">Badge</bw-badge>
<bw-badge color="blue" size="lg">Badge</bw-badge>
<bw-badge color="blue" size="md">
  <bw-icon size="sm">circle</bw-icon>
  <span>With Icon</span>
</bw-badge>
<bw-badge color="blue" size="md" type="box">
  <bw-icon size="sm">circle</bw-icon>
  <span>With Icon and close</span>
  <bw-icon slot="close" size="sm">close</bw-icon>
</bw-badge>

Properties

Property	Attribute	Description	Type	Default
button	button	Makes badge clickable and adds a hover state	boolean	false
closable	closable	Renders a close button at the end	boolean	false
color	color	Display color of the badge	"blue" | "gray" | "green" | "orange" | "purple" | "red" | "teal"	'gray'
ellipsis	ellipsis	Truncates text with an ellipsis	boolean	false
size	size	Badge Size	"lg" | "md" | "sm"	'md'
type	type	Visual style of the badge	"box" | "pill"	'pill'

Slots

Slot	Description
	Content of the badge
"close"	Close button

Shadow Parts

Part	Description
"button"	button container
"main"	main container

Dependencies

Used by

• bw-datepicker
• bw-menu
• bw-select

Depends on

• bw-icon-button

Graph

---

© 2025 United Systems & Software - All Rights Reserved.