Components
Badge
Indicator of values such as labeling or notification
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.Usage
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. How to import your theme: Legion iOS UIKit offers four themes: ThemeAGR, ThemeEazy, ThemeIHS, ThemeLGN, and ThemeMyTEnS.
import ThemeLGN
Type
LGNButton have 7 types component, in which each component will be rendered as a solid component:
| Primary | Secondary | Tertiary | Information | Warning | Error | Success |
|---|---|---|---|---|---|---|
 |  |  |  |  |  |  |
Primary
let badge = LGNBadge(type: .primary)badge.text = "Badge"
Secondary
let badge = LGNBadge(type: .secondary)badge.text = "Badge"
Tertiary
let badge = LGNBadge(type: .tertiary)badge.text = "Badge"
Information
let badge = LGNBadge(type: .information)badge.text = "Badge"
Warning
let badge = LGNBadge(type: .warning)badge.text = "Badge"
Error
let badge = LGNBadge(type: .error)badge.text = "Badge"
Success
let badge = LGNBadge(type: .success)badge.text = "Badge"
You can also change its type attribute directly
let badge = LGNBadge()badge.type = .information
Size
You can customize the size of the badge via the size enum, where BaseLGNBadge.Size includes lg, md and sm.
| Size | Badge |
|---|---|
| Large |  |
| Medium |  |
| Small |  |
Large
let badge = LGNBadge(size: .lg)badge.text = "Badge"
Medium
let badge = LGNBadge(size: .md)badge.text = "Badge"
Small
let badge = LGNBadge(size: .sm)badge.text = "Badge"
You can also modify its size attribute directly
let badge = LGNBadge()badge.size = .lg
Icon
You can insert icon in button on the left side, right side, or even both sides using leftIcon and rightIcon attribute.
| Icon Position | Solid |
|---|---|
| Left |  |
| Right |  |
| Both sides |  |
Left Icon
let badge = LGNBadge()badge.text = "Badge"badge.leftIcon = UIImage(systemName: "heart.fill")
Right Icon
let badge = LGNBadge()badge.text = "Badge"badge.rightIcon = UIImage(systemName: "heart.fill")
Both Sides Icon
let badge = LGNBadge()badge.text = "Badge"badge.leftIcon = UIImage(systemName: "heart.fill")badge.rightIcon = UIImage(systemName: "heart.fill")
Basic Badge
If you create LGNBadge without any text or icons, it will create a small dot based on it size (default .md) and type (default .primary)
| Large | Medium | Small |
|---|---|---|
 |  |  |
Large Dot
let badge = LGNBadge(size: .lg)
Medium Dot
let badge = LGNBadge(size: .md)
Small Dot
let badge = LGNBadge(size: .sm)