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
<dap-ds-stack direction="row" spacing="600"> <dap-ds-notification-badge badgeContent="4"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> <dap-ds-notification-badge badgeContent="dh"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> <dap-ds-notification-badge badgeContent="300" max="100"> <dap-ds-avatar size="lg" src="/img/components/apples.webp"></dap-ds-avatar> </dap-ds-notification-badge> </dap-ds-stack>
Zero values are not showed by default, but it can be display with the showZero parameter.
<dap-ds-stack direction="row" spacing="600"> <dap-ds-notification-badge badgeContent="0"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> <dap-ds-notification-badge badgeContent="0" showZero> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> </dap-ds-stack>
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.
<dap-ds-stack direction="row" spacing="600"> <dap-ds-notification-badge badgeContent="17" max="15"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> <dap-ds-notification-badge badgeContent="100000" max="0"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> </dap-ds-stack>
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.
<dap-ds-stack direction="row" spacing="600"> <dap-ds-notification-badge badgeContent="17" variant="round"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> <dap-ds-notification-badge visible variant="dot"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> </dap-ds-stack>
The badge content can be shown at the corner of the content slot using the placement property.
<dap-ds-stack direction="row" spacing="600"> <dap-ds-notification-badge badgeContent="17" variant="dot" placement="top-start"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> <dap-ds-notification-badge badgeContent="17" variant="dot" type="positive" placement="top-end"> <dap-ds-icon-arrow-down-line /> </dap-ds-notification-badge> <dap-ds-notification-badge badgeContent="17" variant="dot" type="negative" placement="bottom-end"> <dap-ds-icon-information-fill /> </dap-ds-notification-badge> <dap-ds-notification-badge badgeContent="17" variant="dot" type="warning" placement="bottom-start"> <dap-ds-icon-arrow-down-line /> </dap-ds-notification-badge> </dap-ds-stack>
The badge content visibility can be explicit controlled with the visible property. It is usefule for the dot variant.
<dap-ds-stack> <dap-ds-notification-badge visible variant="dot"> <dap-ds-icon-checkbox-circle-fill /> </dap-ds-notification-badge> </dap-ds-stack>
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 |