Badge
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 is a customizable component designed to display a small, medium or large badge with different styles and background colors. It is commonly used for indicators like "Success" or "Error".
1. Reference
This component inherits props from the Badge.
2. Type
You can edit the type with the default, success or error parameter.
Image 2.1 : Type default
Image 2.2 : Type success
Image 2.3 : Type error
3. Size
You can edit the size with the lg, md or sm parameter.
Image 3.1 : Size lg
Image 3.2 : Size md
Image 3.3 : Size sm
SwiftUI
The DLBadge is a customizable SwiftUI component designed to display a small badge or label with different styles and background colors. It is commonly used for indicators like "New," "Error" or "Success".
1. Reference
This component inherits props from the Badge.
-
2. Type
You can edit the type with the .normal, .error or .success parameter.
value: "Badge",
type: .normal,
size: .sm
)
DLBadge(
value: "Badge",
type: .error,
size: .sm
)
DLBadge(
value: "Badge",
type: .success,
size: .sm
)
3. Size
You can edit the size with the .sm, .md or .lg parameter.
value: "Badge",
type: .normal,
size: .sm
)
DLBadge(
value: "Badge",
type: .normal,
size: .md
)
DLBadge(
value: "Badge",
type: .normal,
size: .lg
)
Jetpack Compose
The Badge is a customizable component designed to display a small badge or label with different styles and background colors. It is commonly used for indicators like "New," "Error" or "Success".
1. Reference
This component inherits props from the Badge.
-
2. Type
You can edit the type with the BadgeType.default, BadgeType.error or BadgeType.success parameter.
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.default
)
Badge(
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.error
)
Badge(
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.success
)
3. Size
You can edit the size with the BadgeSize.sm, BadgeSize.md or BadgeSize.lg parameter.
value = "Badge",
size = BadgeSize.sm,
type = BadgeType.default
)
Badge(
value = "Badge",
size = BadgeSize.md,
type = BadgeType.default
)
Badge(
value = "Badge",
size = BadgeSize.lg,
type = BadgeType.default
)
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?