Linkable
A link component creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
| Install | yarn add @diallink-corp/convergo-react-text |
|---|---|
| Version | 4.1.2 |
| Usage | import {Linkable} from '@diallink-corp/convergo-react-text' |
Example
The link component accepts a native anchor element or React router element as a child.
<Linkable>
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Link
</a>
</Linkable><Linkable>
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Link
</a>
</Linkable><Linkable>
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Link
</a>
</Linkable><Linkable>
<Link to="/link">Link</Link>
</Linkable><Linkable>
<Link to="/link">Link</Link>
</Linkable><Linkable>
<Link to="/link">
Link
</Link>
</Linkable>Color
The color prop can be used to set the color of the link.
<ul>
<li>
<Link color="primary">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Primary link
</a>
</Link>
</li>
<li>
<Link color="secondary">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Secondary link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link color="primary">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Primary link
</a>
</Link>
</li>
<li>
<Link color="secondary">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Secondary link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link color="primary">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Primary link
</a>
</Link>
</li>
<li>
<Link color="secondary">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Secondary link
</a>
</Link>
</li>
</ul>Size
The size prop of the link component defines the size and other styles of the link.
<ul>
<li>
<Link size="small">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
<li>
<Link size="medium">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
<li>
<Link size="large">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link size="small">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
<li>
<Link size="medium">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
<li>
<Link size="large">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link size="small">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
<li>
<Link size="medium">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
<li>
<Link size="large">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
The link
</a>
</Link>
</li>
</ul>Weight
The weight prop of the heading component defines the font weight of the link.
<ul>
<li>
<Link weight="light">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Light link
</a>
</Link>
</li>
<li>
<Link weight="bold">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Bold link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link weight="light">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Light link
</a>
</Link>
</li>
<li>
<Link weight="bold">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Bold link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link weight="light">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Light link
</a>
</Link>
</li>
<li>
<Link weight="bold">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Bold link
</a>
</Link>
</li>
</ul>Transform
Through the transform prop, the capitalization of the link can be changed.
<ul>
<li>
<Link transform="lowercase">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Lowercase link
</a>
</Link>
</li>
<li>
<Link transform="capitalize">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Capitalized link
</a>
</Link>
</li>
<li>
<Link transform="capitalize-first-letter">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Capitalized first letter link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link transform="lowercase">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Lowercase link
</a>
</Link>
</li>
<li>
<Link transform="capitalize">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Capitalized link
</a>
</Link>
</li>
<li>
<Link transform="capitalize-first-letter">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Capitalized first letter link
</a>
</Link>
</li>
</ul><ul>
<li>
<Link transform="lowercase">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Lowercase link
</a>
</Link>
</li>
<li>
<Link transform="capitalize">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Capitalized
link
</a>
</Link>
</li>
<li>
<Link transform="capitalize-first-letter">
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
>
Capitalized
first letter
link
</a>
</Link>
</li>
</ul>