DÁP Design System - DÁP badge webcomponent

DÁP badge

This badge is a brand item showing that the frontend of the app uses the DÁP design system.

Examples

<dap-ds-stack>
<dap-ds-dap-badge>
</dap-ds-dap-badge>
<div style={{ backgroundColor: 'var(--dds-indigo-1000)', padding: 10 }}>
  <dap-ds-dap-badge inverted>
  </dap-ds-dap-badge>
</div>
</dap-ds-stack>

Importing

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

Importing React

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

Attributes

Property	Type	Default	Description
`inverted`	`boolean`	`false`	The color style of the DÁP badge
`variant`	`'normal'`, `'inverted'`	`'normal'`	The variant of the DÁP badge

Slots

Name	Description
`(default)`	Description of badge *

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	Main badge container
`icon`	Badge icon
`text`	Badge text

CSS Custom Properties

Property Name	Description
`--dds-badge-padding`	Custom padding for the badge (default: var(--dds-spacing-200) var(--dds-spacing-300))
`--dds-badge-border-width`	Custom border width for the badge (default: var(--dds-border-width-base))
`--dds-badge-border-color`	Custom border color for the badge (default: var(--dds-border-neutral-divider))
`--dds-badge-border-radius`	Custom border radius for the badge (default: var(--dds-spacing-200))
`--dds-badge-color`	Custom text color for the badge (default: var(--dds-text-neutral-base))
`--dds-badge-gap`	Custom gap between icon and text (default: var(--dds-spacing-200))
`--dds-badge-font-size`	Custom font size for the badge (default: var(--dds-font-xs))
`--dds-badge-font-weight`	Custom font weight for the badge (default: var(--dds-font-weight-medium))
`--dds-badge-line-height`	Custom line height for the badge (default: var(--dds-font-line-height-large))