Skip to main content

Badge

Badges are used to highlight an item's status for quick recognition. They can be used to show unread counts, notifications, and other status indicators. They can also be used as removable tags.

Result
Loading...
Live Editor
<div data-testid="pw-badge-defaults">
	<Badge variant="primary me-2">Primary</Badge>
	<Badge variant="secondary me-2">Secondary</Badge>
	<Badge variant="success me-2">Success</Badge>
	<Badge variant="danger me-2">Danger</Badge>
	<Badge variant="warning me-2">Warning</Badge>
	<Badge variant="info me-2">Info</Badge>
	<Badge variant="light me-2">Light</Badge>
	<Badge variant="dark">Dark</Badge>
</div>

Variants​

Outline​

Result
Loading...
Live Editor
<div data-testid="pw-badge-variants-outline">
	<Badge variant="outline-primary" className="me-2">
		Primary
	</Badge>
	<Badge variant="outline-secondary" className="me-2">
		Secondary
	</Badge>
	<Badge variant="outline-success" className="me-2">
		Success
	</Badge>
	<Badge variant="outline-danger" className="me-2">
		Danger
	</Badge>
	<Badge variant="outline-warning" className="me-2">
		Warning
	</Badge>
	<Badge variant="outline-info" className="me-2">
		Info
	</Badge>
	<Badge variant="outline-light" className="me-2">
		Light
	</Badge>
	<Badge variant="outline-dark">Dark</Badge>
</div>

Bold​

Result
Loading...
Live Editor
<div data-testid="pw-badge-variants-bold">
	<Badge variant="bold-primary" className="me-2">
		Primary
	</Badge>
	<Badge variant="bold-secondary" className="me-2">
		Secondary
	</Badge>
	<Badge variant="bold-success" className="me-2">
		Success
	</Badge>
	<Badge variant="bold-danger" className="me-2">
		Danger
	</Badge>
	<Badge variant="bold-warning" className="me-2">
		Warning
	</Badge>
	<Badge variant="bold-info" className="me-2">
		Info
	</Badge>
	<Badge variant="bold-light" className="me-2">
		Light
	</Badge>
	<Badge variant="bold-dark">Dark</Badge>
</div>

Custom color​

If a custom background color is provided to Badge, it will default to using the bold variant. The text color will be computed automatically based on the provided background color to make sure accessibility requirements for text contrast are met.

Result
Loading...
Live Editor
<>
	<Badge customColor="#000000" className="me-2">
		Dark
	</Badge>
	<Badge customColor="#ffffff">Light</Badge>
</>

Sizes​

Result
Loading...
Live Editor
<div data-testid="pw-badge-sizes">
	<Badge size="xxs" className="me-2">
		2x Small
	</Badge>
	<Badge size="xs" className="me-2">
		Extra Small
	</Badge>
	<Badge size="sm" className="me-2">
		Small
	</Badge>
	<Badge size="md" className="me-2">
		Medium
	</Badge>
	<Badge size="lg" className="me-2">
		Large
	</Badge>
	<Badge size="xl" className="me-2">
		Extra Large
	</Badge>
	<Badge size="xxl" className="me-2">
		2x Large
	</Badge>
</div>

As a notification on an element​

The xs size should be used when adding notification style badges on elements.

Result
Loading...
Live Editor
<Button className="position-relative">
	Messages
	<Badge
		className="translate-middle position-absolute top-0 start-100"
		size="xs"
		variant="danger"
		radius="pill"
		type="number"
	>
		15
	</Badge>
</Button>

The dot type can be used to apply a generic notification to any element.

Result
Loading...
Live Editor
<Button className="position-relative">
	Messages
	<Badge
		className="translate-middle position-absolute top-0 start-100"
		type="dot"
		size="xs"
		variant="danger"
	>
		Unread messages!
	</Badge>
</Button>

Removable​

Passing an onRemove prop to the Badge will render a delete icon and make it interactive.

Result
Loading...
Live Editor
<Badge variant="danger" type="dismissible" onRemove={() => console.log('remove')}>
	Delete me
</Badge>

As an interactive element​

It is possible to create interactive badges. Specifically badges that behave like buttons by passing button to the as prop.

Result
Loading...
Live Editor
<Badge
	as="button"
	variant="primary"
	onClick={() => console.log('clicked')}
	renderSuffix={() => <span className="icon-edit-05" />}
>
	Edit me
</Badge>

Icons​

Use renderPrefix and renderSuffix to add icons to Badges.

Result
Loading...
Live Editor
<div data-testid="pw-badge-icons">
	{['xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs'].map((size) => (
		<Badge
			key={size}
			size={size}
			className="me-2 mb-2"
			renderPrefix={() => <span className="icon-arrow-left" />}
			renderSuffix={() => <span className="icon-arrow-right" />}
		>
			{size} Size
		</Badge>
	))}
</div>

Props​