# Notification Bubble

## Anatomy

<img src="/images/uxd/badge.png">

- **Digit:** The numerical value displayed inside the bubble, representing the count of new messages or notifications.
- **Background:** The colored area surrounding the digit, providing visual emphasis and indicating the urgency or importance of the notification.
- **Outline:** The border around the background, providing visual separation from surrounding elements and enhancing the bubble's visibility.

## Variant Properties

| Variant   | Description                                                             |
| --------- | ----------------------------------------------------------------------- |
| Primary   | Used for important notifications or updates.                            |
| Secondary | Used for less important notifications or updates.                       |

## Digit Properties

| Amount     | Description                                                             |
| ---------- | ----------------------------------------------------------------------- |
| None       | No numerical value displayed, indicating no new notifications.          |
| Single Digit | Indicates a count of new messages or notifications less than 9.       |
| 9+        | Indicates a count of new messages or notifications greater than 9.      |