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.

Prop

Type

Default

size

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.

Prop

Type

Default

size

.sm

.md(text: String)

.sm

2. Size

You can edit the size with the .sm or .md(text: String) parameter.

2
DLBadgeNotification(
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.

Prop

Type

Default

size

BadgeNotificationSize.sm

BadgeNotificationSize.md

BadgeNotificationSize.sm

2. Size

You can edit the size with the BadgeNotificationSize.sm or BadgeNotificationSize.md parameter.

2
BadgeNotification(
size = BadgeNotificationSize.sm
)

BadgeNotification(
size = BadgeNotificationSize.md,
text = "2" )

React Native

The CustomBadgeNotification 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.

Prop

Type

Default

size

2. Size

You can edit the size with the sm or md parameter.

2
import { View } from 'react-native';
import CustomBadgeNotification from '../../components/common/CustomBadgeNotification';

export default function ScreenName() {
return (
<View>

<NotificationBadge
size="md"
notifications={5}
positioning={false}
position={"relative"}
/>

<NotificationBadge
size="sm"
notifications={3}
position={"relative"}
/>

</View>
);
}

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version