Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Alert

Alert are to display a list of options on a temporary surface

banner-Alert
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

Upcoming

Usage

To use the Legion iOS UIKit theme, you need to import one of the available themes.

Currently, the following themes are supported: ThemeAGR, ThemeEazy, ThemeIHS, ThemeLGN, and ThemeMyTEnS.

import ThemeLGN

Variant

Legion Have 4 Variants of Alert:

Error

LGNAlertUIKit Variant Error
let alertView = LGNAlertUIKit(
variant: .error,
title: "Success title",
description: "Interactively monetize corporate alignments and fully tested niche markets.",
actionButtonTitle: "Call to action",
onTapAction: {
print("On tap action")
}
)

Success

LGNAlertUIKit Variant Success
let alertView = LGNAlertUIKit(
variant: .success,
title: "Success title",
description: "Interactively monetize corporate alignments and fully tested niche markets.",
actionButtonTitle: "Call to action",
onTapAction: {
print("On tap action")
}
)

Warning

LGNAlertUIKit Variant Warning
let alertView = LGNAlertUIKit(
variant: .warning,
title: "Success title",
description: "Interactively monetize corporate alignments and fully tested niche markets.",
actionButtonTitle: "Call to action",
onTapAction: {
print("On tap action")
}
)

Info

LGNAlertUIKit Variant Info
let alertView = LGNAlertUIKit(
variant: .info,
title: "Success title",
description: "Interactively monetize corporate alignments and fully tested niche markets.",
actionButtonTitle: "Call to action",
onTapAction: {
print("On tap action")
}
)

Properties

PropertiesDescriptionDefault Value
actionButtonColorThe color of the call-to-action buttonUIColor(hex: “0BA5EC”)
actionButtonFontThe font of the call-to-action button textUIFont.systemFont(ofSize: 14, weight: .semibold)
actionButtonTextThe label for the call-to-action buttonnil
backgroundColorThe background color of the alertUIColor(hex: “F5FBFF”)
borderColorThe border color of the alertUIColor(hex: “0BA5EC”)
borderWidthThe border width of the alert1.0
cornerRadiusThe corner radius of the alert4.0
descriptionThe text to display in the description viewnil
descriptionColorThe color of the description textUIColor(hex: “667085”)
descriptionFontThe font of the description textUIFont.systemFont(ofSize: 12, weight: .regular)
leftIconThe image to display on the left side of the alertnil
leftIconBackgroundColorThe background color for the left iconUIColor(hex: “0BA5EC”)
leftIconTintColorThe tint color for the left icon.white
titleThe text to display in the title viewnil
titleColorThe color of the title textUIColor(hex: “1D2939”)
titleFontThe font of the title textUIFont.systemFont(ofSize: 16, weight: .bold)
onDismissedClosure that gets called when the alert is dismissednil
onTapActionClosure that gets called when the CTA button is tappednil
variantThe type of alert (error, success, warning, info).info
withDismissButtonDetermines whether the close button is showntrue