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

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.

Legion Anchor Android Compose

Variants, Sizes, and States

Legion has 2 variants for Anchor Text:

  1. Left Icon
  2. Right Icon

We have three sizes:

  1. Large Size
  2. Medium Size
  3. Small Size

We have two states:

  1. Active
  2. Disabled

Usage

The following is code to implement Anchor Text component.

Left Icon

LgnAnchor(
text = "Anchor",
onClick = { /*TODO*/ },
iconLeft = { Icon(imageVector = Icons.Default.DateRange, contentDescription = "icon") }
)

Right Icon

LgnAnchor(
text = "Anchor",
onClick = { /*TODO*/ },
iconRight = { Icon(imageVector = Icons.Default.DateRange, contentDescription = "icon") }
)

Sizes

Large Size

LgnAnchor(
(text = "Large Anchor"),
(onClick = {
/*TODO*/
}),
(size = LgnAnchorSize.Large)
);

Medium Size

LgnAnchor(
(text = "Small Anchor"),
(onClick = {
/*TODO*/
}),
(size = LgnAnchorSize.Medium)
);

Small Size

LgnAnchor(
(text = "Small Anchor"),
(onClick = {
/*TODO*/
}),
(size = LgnAnchorSize.Small)
);

States

Active

LgnAnchor(
(text = "Active Anchor"),
(onClick = {
/*TODO*/
})
);

Disabled

LgnAnchor(
(text = "Disabled Anchor"),
(onClick = {
/*TODO*/
}),
(enabled = false)
);

Attributes

ParametersTypeDescription
textStringSet the text of Anchor
onClickFunctionAction when Anchor is on Click
sizeLgnAnchorSizeSet size of Anchor by LgnAnchorSize.Large
enabledBooleanSet whether the button can be pressed or not
iconLeftComposableTo display left icon
iconRightComposableTo display right icon
colorsLgnAnchorColorsSet the color of the Anchor By LgnAnchorDefaults.colors()
shapeShapeSet size of Anchor by LgnAnchorDefaults.shape
modifierModifier[Modifier] to be applied to the anchor
interactionSourceMutableInteractionSource[MutableInteractionSource] representing the source of the interactions