TextLink

Makes text in paragraphs actionable.

TextLink

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.

NameTypeDefaultDescription
ariaCurrentstringIndicates whether the element represents the current item within within a container or set of related elements.
asComponentstring \| () => React.Element"a"The component used for the root node. Either a string to use a DOM element or a component.
childrenReact.NodeThe content of the TextLink.
dataTeststringOptional prop for testing purposes.
idstringSet id for TextLink
externalbooleanfalseIf true, the TextLink opens link in a new tab.
hrefstringThe URL to link when the TextLink is clicked.
iconLeftReact.NodeThe displayed icon.
iconRightReact.NodeThe displayed icon.
noUnderlinebooleanIf true the TextLink won’t have underline in any its state.
onClickevent => void \| PromiseFunction for handling onClick event.
relstringThe rel of the TextLink. See Functional specs
sizeenumThe size of the TextLink. See Functional specs
standAlonebooleanIf true the TextLink will have safe clickable area, so it’s properly accessible. Useful for usages out of a block of text.
stopPropagationbooleanIf true the click event on children won’t bubble. Useful when you use TextLink inside another clickable element.
tabIndexstring \| numberSpecifies the tab order of an element
titlestringHTML attribute Title, used forclarification of a link, for screen readers.
typeenum"primary"The color type of the TextLink.

enum

typesize
"primary""small"
"secondary""normal"
"info""large"
"success"
"warning"
"critical"
"white"

Functional specs

  • When the external is specified, noopener value will be automatically added to attribute rel for security reason. Read more about it here.

  • The default size of the TextLink is inherited from parent element, e.g. TextLink is wrapped in Text component. Use size prop only when you need to set it explicitly.