Components

Anchor Text

Actionable text link for users to navigate

Usage

Anchor text is text that can be clicked and hyperlinked with other sites or pages. The use of anchor text is very important in the world of content marketing because it can increase index and ranking on search engines.

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

    import LegionUI

Variant

LGNAnchorText with the following appearances:

Label

Icon

Icon Left + Label

Label + Icon Right

Icon Left + Label + Icon Right

Use this Function : LGNAnchorText

This code sample demonstrates how to modify the variant of Anchor text :

A. Label

LGNAnchorText(
    title: "Label"
)

B. Icon

LGNAnchorText(
    centerImage: Image(systemName: "plus")
)

C. Icon Left + Label

LGNAnchorText(
    title: "Label",
    leftImage: Image(systemName: "plus")
)

D. Label + Icon Right

LGNAnchorText(
    title: "Label",
    rightImage: Image(systemName: "plus")
)

E. Icon Left + Label + Icon Right

LGNAnchorText(
    title: "Label",
    leftImage: Image(systemName: "plus"),
    rightImage: Image(systemName: "chevron.down")
)

Attribute

Legion Have 1 Attribute for Customize Anchor text :

Size

This size attribute for user to costumize size on the Anchor text

Small

Label

Icon

Icon Left + Label

Label + Icon Right

Icon Left + Label + Icon Right

Use this Function : LGNAnchorText

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

A. Label

LGNAnchorText(
    title: "Label"
)
.variant(size: .small)

B. Icon

LGNAnchorText(
    centerImage: Image(systemName: "plus")
)
.variant(size: .small)

C. Icon Left + Label

LGNAnchorText(
    title: "Label",
    leftImage: Image(systemName: "plus")
)
.variant(size: .small)

D. Label + Icon Right

LGNAnchorText(
    title: "Label",
    rightImage: Image(systemName: "plus")
)
.variant(size: .small)

E. Icon Left + Label + Icon Right

LGNAnchorText(
    title: "Label",
    leftImage: Image(systemName: "plus"),
    rightImage: Image(systemName: "chevron.down")
)
.variant(size: .small)

Normal

Label

Icon

Icon Left + Label

Label + Icon Right

Icon Left + Label + Icon Right

Use this Function : LGNAnchorText

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

A. Label

LGNAnchorText(
    title: "Label"
)
.variant(size: .normal)

B. Icon

LGNAnchorText(
    centerImage: Image(systemName: "plus")
)
.variant(size: .normal)

C. Icon Left + Label

LGNAnchorText(
    title: "Label",
    leftImage: Image(systemName: "plus")
)
.variant(size: .normal)

D. Label + Icon Right

LGNAnchorText(
    title: "Label",
    rightImage: Image(systemName: "plus")
)
.variant(size: .normal)

E. Icon Left + Label + Icon Right

LGNAnchorText(
    title: "Label",
    leftImage: Image(systemName: "plus"),
    rightImage: Image(systemName: "chevron.down")
)
.variant(size: .normal)

Properties

With Title

Properties	Description	Default Value
title	the main text string you want to display on anchor text	`not have`
fontFamily	fontFamily of your title	`""`
leftImage	the Image() you want to display on the left side of your title text	`nil`
rightImage	the Image() you want to display on the right side of your title text	`nil`
tintColor	color tint for your anchor text: title, left image, and right image	`Color.LGNTheme.primary500`
action	The action to perform when the user pressed the anchor text.	`{}`

With centerImage (Without Title)

Properties	Description	Default Value
centerImage	the only Image() you want to display on the center side of the anchor text	not have
tintColor	color tint for your center image	`Color.LGNTheme.primary500`
action	The action to perform when the user pressed the anchor text.	`{}`

Do you have feedback?

Please let us know to make it better

Send Feedback