Components
Anchor Text
Actionable text link for users to navigate
Selected Theme
Select brand or tribe name to preview style
Default
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.
import { Anchor } from 'legion-ui';
Variant
Legion have 3 variant on Anchor text, Basic, Icons and Disable Anchor text
Basic
Anchor text has default size md
<Anchor>Anchor Text</Anchor>
Icons
You can insert icon in button on the left side & right side iconLeft or iconRight.
Left Icon
<Anchor iconLeft={<DynamicIcon name="ExternalLink" />} size="lg">Learn More</Anchor><Anchor iconLeft={<DynamicIcon name="ExternalLink" />} size="md">Learn More</Anchor><Anchor iconLeft={<DynamicIcon name="ExternalLink" />} size="sm">Learn More</Anchor>
Right Icon
<Anchor iconRight={<DynamicIcon name="ExternalLink" />} size="lg">Learn More</Anchor><Anchor iconRight={<DynamicIcon name="ExternalLink" />} size="md">Learn More</Anchor><Anchor iconRight={<DynamicIcon name="ExternalLink" />} size="sm">Learn More</Anchor>
Disabled
Make checkbox look inactive by adding the disabled.
<Anchor disabled size="lg">Large</Anchor><Anchor disabled>Medium</Anchor><Anchor disabled size="sm">Small</Anchor>
Attribute
You can customize Anchor with attributes, anchors in legion have only one attribute which is size
Size
You can customise the size of the Anchor via the size prop, which accepts either lg, md, or sm. By default size is md.
Large Size
<Anchor size="lg">Anchor Text</Anchor>
Medium Size
<Anchor>Anchor Text</Anchor>
Small Size
<Anchor size="sm">Anchor Text</Anchor>
Props
| property | propType | required | default | description |
|---|---|---|---|---|
| disabled | boolean | - | false | Disabled state of anchor |
| iconLeft | React.ReactNode | - | - | Add icon to the left side of the anchor |
| iconRight | React.ReactNode | - | - | Add icon to the right side of the anchor |
| size | sm | md | lg | - | md | Set the size of anchor |
| style | object | - | - | The style prop lets you style elements inline |
Do you have feedback?
Please let us know to make it better