This badge is a brand item showing that the frontend of the app uses the DÁP design system.
import { DapDSDAPBadge } from 'dap-design-system'
import { DapDSDAPBadgeReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSDAPBadge } from 'dap-design-system/components'
| 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 |
| Name | Description |
|---|---|
(default) | Description of badge * |
No custom events available.
| Part Name | Description |
|---|---|
base | Main badge container |
icon | Badge icon |
text | Badge text |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-dap-badge::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-dap-badge::part(base),
.my-custom-dap-ds-dap-badge::part(icon) {
/* Shared styles */
}
Example usage:
<dap-ds-dap-badge class="my-custom-dap-ds-dap-badge">
DÁP badge
</dap-ds-dap-badge>
.my-custom-dap-ds-dap-badge::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| 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)) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-dap-badge
style="--dds-badge-padding-sm: value; --dds-badge-padding-lg: value;">
DÁP badge
</dap-ds-dap-badge>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-dap-badge {
--dds-badge-padding-sm: value;
--dds-badge-padding-lg: value;
--dds-badge-border-width: value;
}
<dap-ds-dap-badge class="my-custom-dap-ds-dap-badge">
DÁP badge
</dap-ds-dap-badge>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-dap-badge {
--dds-badge-padding-sm: value;
--dds-badge-padding-lg: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
