DÁP Design System - Badge webcomponent

Badge

Badges are small status descriptors for UI elements, used to convey concise information about an item or its status.

Design system docs

Examples

Default badge

<dap-ds-badge>Default Badge</dap-ds-badge>

Badge types

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>

Badge sizes

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>

Importing

import { DapDSBadge } from 'dap-design-system/dist/dds'

Importing React

import { DapDSBadgeReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`type`	`'neutral'`, `'brand'` , `'info'` , `'positive'` , `'warning'` , `'negative'`	`'neutral'`	The type of the badge
`size`	`'lg'`, `'sm'`	`'sm'`	The size of the badge
`icon`	`string`		The icon of the badge, this is a name of a built in icon

Slots

Name	Description
`(default)`	The content of the badge.
`icon`	The icon of the badge.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main container of the badge.
`icon`	The icon of the badge.
`content`	The content of the badge.
`icon-base`	The base of the icon.