To implement TextLink component into your project you’ll need to add the import:
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
After adding import into your project you can use it simply like:
<TextLink>Hello World!</TextLink>
Props
Table below contains all types of the props available in TextLink component.
Name | Type | Default | Description |
---|---|---|---|
ariaCurrent | string |
Indicates whether the element represents the current item within within a container or set of related elements. | |
asComponent | string | () => React.Element |
"a" |
The component used for the root node. Either a string to use a DOM element or a component. |
children | React.Node |
The content of the TextLink. | |
dataTest | string |
Optional prop for testing purposes. | |
external | boolean |
false |
If true , the TextLink opens link in a new tab. |
href | string |
The URL to link when the TextLink is clicked. | |
iconLeft | React.Node |
The displayed icon. | |
iconRight | React.Node |
The displayed icon. | |
noUnderline | boolean |
If true the TextLink won’t have underline in any its state. |
|
onClick | event => void | Promise |
Function for handling onClick event. | |
rel | string |
The rel of the TextLink. See Functional specs | |
size | enum |
The size of the TextLink. See Functional specs | |
standAlone | boolean |
If true the TextLink will have safe clickable area, so it’s properly accessible. Useful for usages out of a block of text. |
|
stopPropagation | boolean |
If true the click event on children won’t bubble. Useful when you use TextLink inside another clickable element. |
|
tabIndex | string | number |
Specifies the tab order of an element | |
title | string |
HTML attribute Title, used forclarification of a link, for screen readers. | |
type | enum |
"primary" |
The color type of the TextLink. |
enum
size | type |
---|---|
"small" |
"primary" |
"normal" |
"secondary" |
"large" |
Functional specs
-
When the
external
is specified,noopener
andnoreferrer
values will automatically added to attributerel
for security reason. -
The default size of the
TextLink
is inherited from parent element, e.g.TextLink
is wrapped inText
component. Usesize
prop only when you need to set it explicitly.