Badges are small status descriptors for UI elements, used to convey concise information about an item or its status.
Design system docs
<dap-ds-badge>Default Badge</dap-ds-badge>
Different types of badges for different statuses
<dap-ds-stack direction="row"> <dap-ds-badge type="neutral"> Neutral Badge </dap-ds-badge> <dap-ds-badge type="brand"> Brand Badge </dap-ds-badge> <dap-ds-badge type="info"> Info Badge </dap-ds-badge> <dap-ds-badge type="positive"> Positive Badge </dap-ds-badge> <dap-ds-badge type="warning"> Warning Badge </dap-ds-badge> <dap-ds-badge type="negative"> Negative Badge </dap-ds-badge> </dap-ds-stack>
Badges can be small or large
<dap-ds-stack direction="row"> <dap-ds-badge size="sm"> Small Badge </dap-ds-badge> <dap-ds-badge size="lg"> Large Badge </dap-ds-badge> </dap-ds-stack>
import { DapDSBadge } from 'dap-design-system/dist/dds'
import { DapDSBadgeReact } from 'dap-design-system/dist/react'
| Name | Description |
|---|---|
(default) | The content of the badge. |
icon | The icon of the badge. |
| Property | Type | Default | Description |
|---|---|---|---|
type | BadgeType | 'neutral' | The type of the badge. Default is neutral. Can be neutral, brand, info, positive, warning, or negative. |
size | CommonSize | 'sm' | The size of the badge. Default is sm. Can be sm or lg. |
icon | string |
No custom events available.
No CSS parts available.