Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Button

Used to initiate an action or trigger the users

banner-Button
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

Usage

Buttons are used to initiate an action or trigger the user to open a link. Buttons can contain a combination of clear and concise labels and can be equipped with icons. How to import your theme: Legion iOS UIKit offers four themes: ThemeAGR, ThemeEazy, ThemeIHS, ThemeLGN, and ThemeMyTEnS.

import ThemeLGN

Variant

LGNButton have 4 component variants:

SolidOutlineTransparentSoft

Solid

let button = LGNButton()
button.label = "Button"
button.variant = .solid

Outline

let button = LGNButton()
button.label = "Button"
button.variant = .outline

Transparent

let button = LGNButton()
button.label = "Button"
button.variant = .transparent

Soft

let button = LGNButton()
button.label = "Button"
button.variant = .soft

Size

You can customize the size of the button via the size enum, where BaseLGNButton.Size includes lg, md and sm.

SizeSolidOutlineTransparentSoft
Large
Medium
Small

Large

Solid

let button = LGNButton()
button.label = "Button"
button.variant = .solid
button.size = .lg

Outline

let button = LGNButton()
button.label = "Button"
button.variant = .outline
button.size = .lg

Transparent

let button = LGNButton()
button.label = "Button"
button.variant = .transparent
button.size = .lg

Soft

let button = LGNButton()
button.label = "Button"
button.variant = .soft
button.size = .lg

Medium

Solid

let button = LGNButton()
button.label = "Button"
button.variant = .solid
button.size = .md

Outline

let button = LGNButton()
button.label = "Button"
button.variant = .outline
button.size = .md

Transparent

let button = LGNButton()
button.label = "Button"
button.variant = .transparent
button.size = .md

Soft

let button = LGNButton()
button.label = "Button"
button.variant = .soft
button.size = .md

Small

Solid

let button = LGNButton()
button.label = "Button"
button.variant = .solid
button.size = .sm

Outline

let button = LGNButton()
button.label = "Button"
button.variant = .outline
button.size = .sm

Transparent

let button = LGNButton()
button.label = "Button"
button.variant = .transparent
button.size = .sm

Soft

let button = LGNButton()
button.label = "Button"
button.variant = .soft
button.size = .sm

Icons

You can insert icon in button on the left side, right side leftImage and rightImage

Icon PositionSolidOutlineTransparentSoft
Left
Right

Left Image

Solid

let button = LGNButton()
button.label = "Button"
button.variant = .solid
button.leftImage = UIImage(named: "square.and.arrow.up.circle.fill")

Outline

let button = LGNButton()
button.label = "Button"
button.variant = .outline
button.leftImage = UIImage(named: "square.and.arrow.up.circle.fill")

Transparent

let button = LGNButton()
button.label = "Button"
button.variant = .transparent
button.leftImage = UIImage(named: "square.and.arrow.up.circle.fill")

Soft

let button = LGNButton()
button.label = "Button"
button.variant = .soft
button.leftImage = UIImage(named: "square.and.arrow.up.circle.fill")

Right Image

Solid

let button = LGNButton()
button.label = "Button"
button.variant = .solid
button.rightImage = UIImage(named: "square.and.arrow.up.circle.fill")

Outline

let button = LGNButton()
button.label = "Button"
button.variant = .outline
button.rightImage = UIImage(named: "square.and.arrow.up.circle.fill")

Transparent

let button = LGNButton()
button.label = "Button"
button.variant = .transparent
button.rightImage = UIImage(named: "square.and.arrow.up.circle.fill")

Soft

let button = LGNButton()
button.label = "Button"
button.variant = .soft
button.rightImage = UIImage(named: "square.and.arrow.up.circle.fill")

Disabled

Make buttons appear inactive by setting the boolean disable to true.

SolidOutlineTransparentSoft
let button = LGNButton()
button.label = "Button"
button.disable = true

Show Activity

SolidOutlineTransparentSoft
let button = LGNButton()
button.label = "Button"
button.loading = true