Components
Badge
Indicator of values such as labeling or notification
Component Status Details
Status component contains a list of checks and completeness that has been tested and owned by each component
We don't use color as the only visual tool to convey information. The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc. The title is the component name that uses the frame base component template. The base component name contains: .Base & "Component Name" if there is more than one. All component properties use the Legion foundation. We can change all the parts that are connected to the component base. The inside of the base component remains connected to the master component. All variant options are not damaged when we change from one to another. Overriding changes to components will not reset other variants. Component's already has component specs documentation.LGNBadge
The LGNBadge is a small status descriptor for UI elements. It can be used to display a status or a count of items.
It may consists of a small circle, usually containing a number or other short character, that appears near other objects.
You can use LGNBadge with the following appearances:
- With text or without text
- With image or without image (both on left or right side)
- Badge size
- Color of badge
Usage
Example of basic error LGNBadge without anything (only simple dot)
LGNBadge(type: .error,size: .medium)
Example of large primary LGNBadge using text only
LGNBadge(label: "999",type: .primary,size: .large,leftImage: Image(systemName: "heart"))
Example of LGNBadge with text and icon on both left and right side
LGNBadge(label: "999",type: .secondary,size: .large,leftImage: Image(systemName: "heart.fill"),rightImage: Image(systemName: "key"))
Attributes
| Properties | Description | Default Value |
|---|---|---|
| Label | Text content for badge | empty string |
| Type | A BadgeType that represents the color of the badge. | no default value |
| Size | A BadgeSize that represents the size of the badge. | .medium |
| LeftImage | An Image that represents the image on the left side of the badge | nil |
| RightImage | An Image that represents the image on the right side of the badge | nil |