A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.
You can set either of the data types:
- number
- string
Zero values are not showed by default, but it can be display with the showZero parameter.
When max parameter is set, it display a capped value, with a plus sign.
Please note: if you want to turn off maximum, you can
- omit the parameter,
- or set it to 0.
Two variants are available: round and dot. The round variant is a circle with the badge content inside. The dot variant is a small dot with no content.
The badge content can be shown at the corner of the content slot using the placement property.
The badge content visibility can be explicit controlled with the visible property. It is usefule for the dot variant.
import { DapDSNotificationBadge } from 'dap-design-system'
import { DapDSNotificationBadgeReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSNotificationBadge } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
badgeContent | string | The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. | |
visible | boolean | false | This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control. |
showZero | boolean | false | This switch decides whether to show a zero value or not. |
type | 'neutral', 'brand' , 'info' , 'positive' , 'warning' , 'negative' | 'negative' | The color scheme of the badge |
variant | 'round', 'dot' | 'round' | The variant of the badge. |
max | number | 0 | The cap value of badge content, if the badge content is greater than the max value, it will be displayed as [number]+. Zero means no cap. |
placement | 'top-start', 'top-end' , 'bottom-start' , 'bottom-end' | 'top-end' | The position of the badge content around the slot content. |
circularAuto | boolean | true | Whether to automatically detect circular elements and adjust positioning accordingly |
forceCircular | boolean | false | Override circular positioning detection - forces circular positioning calculation |
| Name | Description |
|---|---|
(default) | The content of the notification badge. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main container of the notification badge. |
noty | The notification badge container. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-notification-badge::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-notification-badge::part(base),
.my-custom-dap-ds-notification-badge::part(noty) {
/* Shared styles */
}
Example usage:
<dap-ds-notification-badge class="my-custom-dap-ds-notification-badge">
Notification badge
</dap-ds-notification-badge>
.my-custom-dap-ds-notification-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-notification-badge-size | Controls the overall size of the notification badge |
--dds-notification-badge-min-width | Minimum width of the notification badge |
--dds-notification-badge-height | Height of the notification badge |
--dds-notification-badge-padding | Padding inside the notification badge |
--dds-notification-badge-border-radius | Border radius of the notification badge |
--dds-notification-badge-font-size | Font size of the notification badge text |
--dds-notification-badge-dot-size | Size of the dot variant |
--dds-notification-badge-color | Text color of the notification badge |
--dds-notification-badge-neutral-bg | Background color for neutral type |
--dds-notification-badge-brand-bg | Background color for brand type |
--dds-notification-badge-info-bg | Background color for info type |
--dds-notification-badge-positive-bg | Background color for positive type |
--dds-notification-badge-warning-bg | Background color for warning type |
--dds-notification-badge-negative-bg | Background color for negative type |
--dds-notification-badge-circular-offset-x | Horizontal offset for circular positioning |
--dds-notification-badge-circular-offset-y | Vertical offset for circular positioning |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-notification-badge
style="--dds-notification-badge-size: value; --dds-notification-badge-min-width: value;">
Notification badge
</dap-ds-notification-badge>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-notification-badge {
--dds-notification-badge-size: value;
--dds-notification-badge-min-width: value;
--dds-notification-badge-height: value;
}
<dap-ds-notification-badge class="my-custom-dap-ds-notification-badge">
Notification badge
</dap-ds-notification-badge>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-notification-badge {
--dds-notification-badge-size: value;
--dds-notification-badge-min-width: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
