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>
<dap-ds-dap-badge variant="inverted">
</dap-ds-dap-badge>
</dap-ds-stack>
<dap-ds-stack>
<dap-ds-dap-badge size="lg">
</dap-ds-dap-badge>
<dap-ds-dap-badge size="lg" variant="inverted">
</dap-ds-dap-badge>
</dap-ds-stack>
| Property | Type | Default | Description |
|---|
variant | 'normal', 'inverted' | 'normal' | The variant of the DÁP badge |
size | 'sm', 'lg' | 'sm' | The size 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-sm | Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) |
--dds-badge-padding-lg | Custom padding for the large badge (default: var(--dds-spacing-400)) |
--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-radius-base)) |
--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-sm | Custom font size for the small badge (default: var(--dds-font-xs)) |
--dds-badge-font-size-lg | Custom font size for the large 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)) |
--dds-badge-border-color-normal | Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) |
--dds-badge-background-color-normal | Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) |
--dds-badge-color-normal | Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) |
--dds-badge-border-color-inverted | Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) |
--dds-badge-background-color-inverted | Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) |
--dds-badge-color-inverted | Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) |
