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

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.

Status

Resources

Usage

Buttons are used to initiate an action or trigger the user to open a link.

Use Legion Button styles for actions in forms, dialogs, and more with support lots type and attribute for costumize.

Usage Default LegionUI

LGNSoftBtn
LGNSolidBtn
LGNOutlineBtn
LGNTransparentBtn

Usage Theme

ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

LGNSoftButton
LGNSolidButton
LGNOutlineButton
LGNTransparentButton

Variant

This code sample demonstrates how to modify the variant of the button :

Default LegionUI
      


      LGNSoftBtn(title: "Soft Button")
      LGNSolidBtn(title: "Solid Button")
      LGNOutlineBtn(title: "Outline Button")
      LGNTransparentBtn(title: "Transparent Button")
Legion Theme (ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
      


      LGNSoftButton(title: "Soft Button")
      LGNSolidButton(title: "Solid Button")
      LGNOutlineButton(title: "Outline Button")
      LGNTransparentButton(title: "Transparent Button")

Attribute

Legion Have 5 Attributes for Customize Button :

Size

This size text button attribute for user to choose size text inside the button.

Small
Normal

This code sample demonstrates how to modify size text of the button :

Default LegionUI
Small 
      


      LGNSoftBtn(title: "Soft Button").variant(size: .small)
      LGNSolidBtn(title: "Solid Button").variant(size: .small)
      LGNOutlineBtn(title: "Outline Button").variant(size: .small)
      LGNTransparentBtn(title: "Transparent Button").variant(size: .small)
Normal 
      


      LGNSoftBtn(title: "Soft Button").variant(size: .normal)
      LGNSolidBtn(title: "Solid Button").variant(size: .normal)
      LGNOutlineBtn(title: "Outline Button").variant(size: .normal)
      LGNTransparentBtn(title: "Transparent Button").variant(size: .normal)
Legion Theme (ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
Small 
      


      LGNSoftButton(title: "Soft Button").variant(size: .small)
      LGNSolidButton(title: "Solid Button").variant(size: .small)
      LGNOutlineButton(title: "Outline Button").variant(size: .small)
      LGNTransparentButton(title: "Transparent Button").variant(size: .small)
Normal 
      


      LGNSoftButton(title: "Soft Button").variant(size: .normal)
      LGNSolidButton(title: "Solid Button").variant(size: .normal)
      LGNOutlineButton(title: "Outline Button").variant(size: .normal)
      LGNTransparentButton(title: "Transparent Button").variant(size: .normal)

Responsive

This responsive button or boolean attribute for user to choose the button responsively to the screen / layout or not.

Responsive
Not Responsive
Default LegionUI
Responsive 
      


      LGNSoftBtn(title: "Soft Button").variant(size: .small,responsive: true)
      LGNSolidBtn(title: "Solid Button").variant(size: .small,responsive: true)
      LGNOutlineBtn(title: "Outline Button").variant(size: .small,responsive: true)
      LGNTransparentBtn(title: "Transparent Button").variant(size: .small,responsive: true)
      LGNSoftBtn(title: "Soft Button").variant(size: .normal,responsive: true)
      LGNSolidBtn(title: "Solid Button").variant(size: .normal,responsive: true)
      LGNOutlineBtn(title: "Outline Button").variant(size: .normal,responsive: true)
      LGNTransparentBtn(title: "Transparent Button").variant(size: .normal,responsive: true)
No Responsive 
      


      LGNSoftBtn(title: "Soft Button").variant(size: .small,responsive: false)
      LGNSolidBtn(title: "Solid Button").variant(size: .small,responsive: false)
      LGNOutlineBtn(title: "Outline Button").variant(size: .small,responsive: false)
      LGNTransparentBtn(title: "Transparent Button").variant(size: .small,responsive: false)
      LGNSoftBtn(title: "Soft Button").variant(size: .normal,responsive: false)
      LGNSolidBtn(title: "Solid Button").variant(size: .normal,responsive: false)
      LGNOutlineBtn(title: "Outline Button").variant(size: .normal,responsive: false)
      LGNTransparentBtn(title: "Transparent Button").variant(size: .normal,responsive: false)
Legion Theme (ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
Responsive 
      


      LGNSoftButton(title: "Soft Button").variant(size: .small,responsive: true)
      LGNSolidButton(title: "Solid Button").variant(size: .small,responsive: true)
      LGNOutlineButton(title: "Outline Button").variant(size: .small,responsive: true)
      LGNTransparentButton(title: "Transparent Button").variant(size: .small,responsive: true)
      LGNSoftButton(title: "Soft Button").variant(size: .normal,responsive: true)
      LGNSolidButton(title: "Solid Button").variant(size: .normal,responsive: true)
      LGNOutlineButton(title: "Outline Button").variant(size: .normal,responsive: true)
      LGNTransparentButton(title: "Transparent Button").variant(size: .normal,responsive: true)
No Responsive 
      


      LGNSoftButton(title: "Soft Button").variant(size: .small,responsive: false)
      LGNSolidButton(title: "Solid Button").variant(size: .small,responsive: false)
      LGNOutlineButton(title: "Outline Button").variant(size: .small,responsive: false)
      LGNTransparentButton(title: "Transparent Button").variant(size: .small,responsive: false)
      LGNSoftButton(title: "Soft Button").variant(size: .normal,responsive: false)
      LGNSolidButton(title: "Solid Button").variant(size: .normal,responsive: false)
      LGNOutlineButton(title: "Outline Button").variant(size: .normal,responsive: false)
      LGNTransparentButton(title: "Transparent Button").variant(size: .normal,responsive: false)

Icon

Center Icon
Left Icon
Right Icon

This icon attribute for user to choose the icon position inside the button.

This code sample demonstrates how to modify icon of the button :

Default LegionUI
Center Icon 
      


      LGNSoftBtn(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
      LGNSolidBtn(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
      LGNOutlineBtn(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
      LGNTransparentBtn(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
Right Icon 
      


      LGNSoftBtn(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
      LGNSolidBtn(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
      LGNOutlineBtn(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
      LGNTransparentBtn(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
Left Icon 
      


      LGNSoftBtn(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))
      LGNSolidBtn(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))
      LGNOutlineBtn(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))
      LGNTransparentBtn(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))
Legion Theme (ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
Center Icon 
      


      LGNSoftButton(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
      LGNSolidButton(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
      LGNOutlineButton(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
      LGNTransparentButton(title: "Download",centerImage: Image(systemName: "square.and.arrow.down"))
Right Icon 
      


      LGNSoftButton(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
      LGNSolidButton(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
      LGNOutlineButton(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
      LGNTransparentButton(title: "Download",rightImage: Image(systemName: "square.and.arrow.down"))
Left Icon 
      


      LGNSoftButton(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))
      LGNSolidButton(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))
      LGNOutlineButton(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))
      LGNTransparentButton(title: "Download",LeftImage: Image(systemName: "square.and.arrow.down"))

Show Activity

Solid
Outline
Soft
Transaparent

This code sample demonstrates how to modify show activity of the button :

Default LegionUI
      


      LGNSoftBtn(title: "Title").showProgressView(true)
      LGNSolidBtn(title: "Title").showProgressView(true)
      LGNOutlineBtn(title: "Title").showProgressView(true)
      LGNTransparentBtn(title: "Title").showProgressView(true)
Legion Theme (ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
      


      LGNSoftButton(title: "Title").showProgressView(true)
      LGNSolidButton(title: "Title").showProgressView(true)
      LGNOutlineButton(title: "Title").showProgressView(true)
      LGNTransparentButton(title: "Title").showProgressView(true)

Disable

Solid
Outline
Soft
Transaparent

This code sample demonstrates how to modify disable of the button :

Default LegionUI
      


      LGNSoftBtn(title: "Title").disableInteraction(true)
      LGNSolidBtn(title: "Title").disableInteraction(true)
      LGNOutlineBtn(title: "Title").disableInteraction(true)
      LGNTransparentBtn(title: "Title").disableInteraction(true)
Legion Theme (ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
      


      LGNSoftButton(title: "Title").disableInteraction(true)
      LGNSolidButton(title: "Title").disableInteraction(true)
      LGNOutlineButton(title: "Title").disableInteraction(true)
      LGNTransparentButton(title: "Title").disableInteraction(true)

Properties

PropertiesDescriptionDefault Value
actionThe action to perform when the user triggers the button.{}
titleThe title for the button’s title, that describes the purpose of the button’s action.-
textFontTo change the font on the title button.Font.system(size: 16, weight: .bold, design: .default)
tintBtnColorTo change the tint color of button.Color.white
defaultBtnColorTo change the tint color of button.Color.primary500
focusBtnColorTo change the background color of the button when the button is in focus state.Color.primary700