Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Anchor Text

Actionable text link for users to navigate

banner-Anchor Text
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

LGNAnchorTextUIKit provides clickable anchor text that can hyperlink to other sites or pages. It supports various sizes, icons, and states to fit different design requirements.

Legion iOS UIKit offers five themes: ThemeAGRUIKit, ThemeEazyUIKit, ThemeIHSUIKit, ThemeLGNUIKit, and ThemeMyTEnSUIKit.

To import a theme, use the following syntax:

import ThemeLGNUIKit

Examples

Size Large (.lg)

LGNAnchorText Size Large
let anchorText = LGNAnchorTextUIKit(
size: .lg,
textLabel: "Submit",
targetURL: URL(string: "https://legion.telkom.design")
)

Size Medium (.md)

LGNAnchorText Size Medium
let anchorText = LGNAnchorTextUIKit(
size: .md,
textLabel: "Submit",
targetURL: URL(string: "https://legion.telkom.design")
)

Size Small (.sm)

LGNAnchorText Size Small
let anchorText = LGNAnchorTextUIKit(
size: .sm,
textLabel: "Submit",
targetURL: URL(string: "https://legion.telkom.design")
)

Left Icon

LGNAnchorText Left Icon
let anchorText = LGNAnchorTextUIKit(
textLabel: "Submit",
leftIcon: UIImage(systemName: "arrow.clockwise.circle.fill"),
targetURL: URL(string: "https://legion.telkom.design")
)

Right Icon

LGNAnchorText Right Icon
let anchorText = LGNAnchorTextUIKit(
textLabel: "Submit",
rightIcon: UIImage(systemName: "arrow.right.square.fill"),
targetURL: URL(string: "https://legion.telkom.design")
)

State Pressed

LGNAnchorText Pressed
let anchorText = LGNAnchorTextUIKit(
textLabel: "Submit"
)
anchorText.onPressed = {
guard let url = URL(string: "https://legion.telkom.design") else { return }
UIApplication.shared.open(url)
}

State Focused

LGNAnchorText Focused
let anchorText = LGNAnchorTextUIKit(
textLabel: "Submit"
)
anchorText.onFocused = {
guard let url = URL(string: "https://legion.telkom.design/components/anchor/ios/") else { return }
UIApplication.shared.open(url)
}

Disabled

LGNAnchorText Disabled
let anchorText = LGNAnchorTextUIKit(
textLabel: "Submit"
)
anchorText.isDisable = true

Full Configuration

LGNAnchorText Full Configuration
let anchorText = LGNAnchorTextUIKit(
size: .lg,
textLabel: "Submit",
leftIcon: UIImage(systemName: "arrow.clockwise.circle.fill"),
rightIcon: UIImage(systemName: "arrow.right.square.fill"),
targetURL: URL(string: "https://legion.telkom.design")
)
anchorText.isDisable = false
anchorText.onPressed = {

Properties

PropertyDescriptionDefault Value
isDisableWhether the anchor text is disabled.false
leftIconThe icon displayed on the left side of the text.nil
onFocusedClosure to be executed when the anchor text is focused (long press started).nil
onPressedClosure to be executed when the anchor text is pressed. Overrides targetURL and will be called instead when tapped.nil
rightIconThe icon displayed on the right side of the text.nil
sizeThe size of the anchor text. Available sizes: .sm, .md, .lg.md
targetURLThe URL that the anchor text will link to.nil
textLabelThe text displayed within the anchor.""