StatusBadge

The StatusBadge component is for showing a small amount of color-categorized metadata. It's ideal for getting a user's attention.

Import

React

// with @dhl-official/react-library:
import { DhlStatusBadge } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlStatusBadge } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-status-badge></dhl-status-badge>

Vue.js

// with @dhl-official/vue-library:
import { DhlStatusBadge } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlStatusBadge } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlStatusBadge />

Angular

<dhl-status-badge />

Vue.js

<dhl-status-badge />

Interactive Demo

Example

<DhlStatusBadge variant="pill" status="info" label="Status" showDropdownIcon></DhlStatusBadge>

Readme

Properties

Property	Attribute	Description	Type	Default
clickEvent	--	An optional clickEvent callback handler.	(e: any) => void	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataRole	data-role	An optional prop defining the role attribute of the component.	string	"status"
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
icon	icon	An optional prop to set component icon.	string	undefined
isDropdownOpen	is-dropdown-open	An optional boolean to toggle dropdown icon. Will be visible only for "pill" variant.	boolean	false
label	label	An optional prop to set component label.	string	undefined
showDropdownIcon	show-dropdown-icon	An optional boolean prop to show dropdown icon.	boolean	true
size	size	An optional size prop for the component.	Sizes.MD \| Sizes.SM	DHL_STATUS_BADGE.SIZE.MD
status	status	An optional prop to select a component status.	Variants.error \| Variants.info \| Variants.neutral \| Variants.success \| Variants.warning	DHL_STATUS_BADGE.STATUS.NEUTRAL
variant	variant	An optional prop to select a component variant.	"count" \| "dot" \| "icon" \| "pill"	DHL_STATUS_BADGE.VARIANT.PILL

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!