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.

CSS Custom Properties

Property Name	Description
`--dds-badge-border-width`	The width of the badge's border. Default is the design system's base border width.
`--dds-badge-border-style`	The style of the badge's border. Default is solid.
`--dds-badge-border-radius`	The border radius of the badge. Default is the design system's base radius.
`--dds-badge-font-weight`	The font weight of the badge text. Default is bold.
`--dds-badge-line-height`	The line height of the badge text. Default is 1.2.
`--dds-badge-transition`	The transition property for the badge. Default is 'all 0.2s ease-in-out'.
`--dds-badge-padding-sm`	The padding of the small badge. Default is the design system's spacing-100 and spacing-200.
`--dds-badge-padding-lg`	The padding of the large badge. Default is the design system's spacing-100 and spacing-300.
`--dds-badge-font-size-sm`	The font size of the small badge. Default is the design system's font-xs.
`--dds-badge-font-size-lg`	The font size of the large badge. Default is the design system's font-sm.
`--dds-badge-neutral-border-color`	The border color of the neutral badge. Default is the design system's border-neutral-base.
`--dds-badge-neutral-background`	The background color of the neutral badge. Default is the design system's background-neutral-medium.
`--dds-badge-neutral-color`	The text color of the neutral badge. Default is the design system's text-neutral-subtle.
`--dds-badge-brand-border-color`	The border color of the brand badge. Default is the design system's border-brand-base.
`--dds-badge-brand-background`	The background color of the brand badge. Default is the design system's background-brand-medium.
`--dds-badge-brand-color`	The text color of the brand badge. Default is the design system's text-brand-subtle.
`--dds-badge-info-border-color`	The border color of the info badge. Default is the design system's border-informative-base.
`--dds-badge-info-background`	The background color of the info badge. Default is the design system's background-informative-medium.
`--dds-badge-info-color`	The text color of the info badge. Default is the design system's text-informative-subtle.
`--dds-badge-positive-border-color`	The border color of the positive badge. Default is the design system's border-positive-base.
`--dds-badge-positive-background`	The background color of the positive badge. Default is the design system's background-positive-medium.
`--dds-badge-positive-color`	The text color of the positive badge. Default is the design system's text-positive-subtle.
`--dds-badge-warning-border-color`	The border color of the warning badge. Default is the design system's border-warning-subtle.
`--dds-badge-warning-background`	The background color of the warning badge. Default is the design system's background-warning-medium.
`--dds-badge-warning-color`	The text color of the warning badge. Default is the design system's text-warning-subtle.
`--dds-badge-negative-border-color`	The border color of the negative badge. Default is the design system's border-negative-base.
`--dds-badge-negative-background`	The background color of the negative badge. Default is the design system's background-negative-medium.
`--dds-badge-negative-color`	The text color of the negative badge. Default is the design system's text-negative-subtle.