Components

Chips

Chips allow users to enter information, make selections, filter content, or trigger actions.

Usage

Chips allow users to enter information, make choices, filter content, or trigger actions. While buttons are expected to appear consistently and with a familiar call to action, chips will appear dynamically as groups of multiple interactive elements.

Use Legion chips styles to modify chips with lots of attributes that make you easier.

    import LegionUI

Variant

Default

Use this Function : LGNChips

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

LGNChips(label: "Label", size: .medium)

Attribute

Legion Have 3 Attributes for Customize Chips :

Size

This size attribute for user to costumize size of chips

Small

LGNChips(label: "Label", size: .small

Medium

LGNChips(label: "Label", size: .medium)

Active

This size attribute for user to costumize active of chips

Small

LGNChips(label: "Label", isActive: true, size: .small)

Medium

LGNChips(label: "Label", isActive: true, size: .medium)

Disable

This size attribute for user to costumize disable of chips

Small

LGNChips(label: "Label", isDisabled: .constant(true), size: .small)

Medium

LGNChips(label: "Label", isDisabled: .constant(true), size: .medium)

Properties

Properties	Description	Default Value
label	The label for the chip’s label, that describes the purpose of the chips’ action.	`'nil'`
size	The size of the chips. Either `.medium` or `.small`	`'nil'`
isDisabled	A binding boolean to enable disable the chips component	`'.constant(false)'`
isActive	The boolean state to enable active state to the chips component.	`'false'`
fontFamily	A string of font family name	`""`
action	The action to perform when the user triggers the chips.	`{}`
isHiddenBorder	The boolean state to hide the border when the state is active	`'false'`
activeTextColor	A text color to be used for the foregroundColor/textlabel when the state is active	`'.white'`
disabledTextColor	A text color to be used for the foregroundColor/textlabel when the state is disabled	`'Color.LGNTheme.tertiary400'`
defaultTextColor	A text color to be used for the foregroundColor/textlabel when the state is default	`'Color.LGNTheme.tertiary900'`
activeBackgroundColor	A background color to be used for the chips background when the state is active	`'Color.LGNTheme.tertiary900'`
notActiveBackgroundColor	A background color to be used for the chips background when the state is not active	`'.clear'`

Example Project

    LGNChips(
    label: "Label",
    isDisabled: .constant(false),
    isActive: true,
    size: .medium,
    fontFamily: "Verdana-Italic") {
        //Action
    }

Do you have feedback?

Please let us know to make it better

Send Feedback