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/dist/dds'
import { DapDSNotificationBadgeReact } from 'dap-design-system/dist/react'
| 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. |
| 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. |
| 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 |
