Badge Activity
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Badge Activity is a customizable component designed to display a badge with different styles. It is commonly used for indicators like "Comments" or "Likes".
1. Reference
This component inherits props from the Badge Activity.
2. Type
You can edit the type with the comment, like or commentLike parameter.
Image 2.1 : Type comment
Image 2.2 : Type like
Image 2.3 : Type commentLike
3. Direction
You can edit the direction with the bottom, top, left or right parameter.
Image 3.1 : Direction bottom
Image 3.2 : Direction top
Image 3.3 : Direction right
Image 3.4 : Direction left
SwiftUI
The DLBadgeActivity is a component designed to display a badge with different styles. It is commonly used for indicators like "Comments" or "Likes".
1. Reference
This component inherits props from the Badge Activity.
-
2. Direction
You can edit the direction with the .bottom, .top, .right or .left parameter.
DLBadgeActivityModel(icon: "ic_Heart", label: "6"),
DLBadgeActivityModel(icon: "ic_Chat", label: "31")
]
DLBadgeActivity(
items: list,
direction: .bottom
)
DLBadgeActivity(
items: list,
direction: .top
)
DLBadgeActivity(
items: list,
direction: .left
)
DLBadgeActivity(
items: list,
direction: .right
)
Jetpack Compose
The BadgeActivity is a component designed to display a badge with different styles. It is commonly used for indicators like "Comments" or "Likes".
1. Reference
This component inherits props from the Badge Activity.
-
2. Type
You can edit the type with the BadgeType.comment, BadgeType.like or BadgeType.commentLike parameter.
type = BadgeType.comment,
direction = BadgeDirection.bottom,
comment = 31
)
BadgeActivity(
type = BadgeType.like,
direction = BadgeDirection.bottom,
like = 6
)
BadgeActivity(
type = BadgeType.commentLike,
direction = BadgeDirection.bottom,
like = 6,
comment = 31
)
3. Direction
You can edit the direction with the BadgeDirection.bottom, BadgeDirection.top, BadgeDirection.left or BadgeDirection.right parameter.
type = BadgeType.commentLike,
direction = BadgeDirection.bottom,
like = 6,
comment = 31
)
BadgeActivity(
type = BadgeType.commentLike,
direction = BadgeDirection.top,
like = 6,
comment = 31
)
BadgeActivity(
type = BadgeType.commentLike,
direction = BadgeDirection.left,
like = 6,
comment = 31
)
BadgeActivity(
type = BadgeType.commentLike,
direction = BadgeDirection.right,
like = 6,
comment = 31
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?