Badge
You can edit 8 Components for free. Get premium for unlimited access.
Displays a badge or a component that looks like a badge.
Figma
The Badge Notification is a customizable component which can be used to display small or medium-sized notification indicators, such as for unread messages or app notifications.
1. Reference
This component inherits props from the Badge Notification.
2. Type
You can edit the size with the md or sm parameter.
Image 2.1 : Type md
Image 2.2 : Type sm
SwiftUI
The DLBadgeNotification is a customizable component which can be used to display small or medium-sized notification indicators, such as for unread messages or app notifications.
1. Reference
This component inherits props from the Badge Notification.
2. Size
You can edit the size with the .sm or .md(text: String) parameter.
size: .sm
)
DLBadgeNotification(
size: .md(text: "2")
)
Jetpack Compose
The BadgeNotification is a customizable component which can be used to display small or medium-sized notification indicators, such as for unread messages or app notifications.
1. Reference
This component inherits props from the Badge Notification.
2. Size
You can edit the size with the BadgeNotificationSize.sm or BadgeNotificationSize.md parameter.
size = BadgeNotificationSize.sm
)
BadgeNotification(
size = BadgeNotificationSize.md,
text = "2" )
Preview
Preview
Code
Wrap(
spacing: DlSpacingTokens.p_12,
children: const [
DlBadge(
size: DlBadgeSize.sm
),
DlBadge(
size: DlBadgeSize.md,
value: '2'
),
],
)Usage
Add this code example to your project to see how the component works.
const DlBadge(
size: DlBadgeSize.md,
value: '99',
)APIÂ Reference
DlBadge is a compact status/count indicator with a fixed red style. It supports two sizes: a small dot sm and a text badge md for numeric values.
Examples
Expand
Preview
Code
const DlBadge(
size: DlBadgeSize.md,
value: '99',
)Discover more content
You have questions or need help?
You want to try?
Save time and money?