@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
56 lines (43 loc) • 4.71 kB
Markdown
# TextLink
To implement TextLink component into your project you'll need to add the import:
```jsx
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
```
After adding import into your project you can use it simply like:
```jsx
<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](#functional-specs) |
| size | [`enum`](#enum) | | The size of the TextLink. [See Functional specs](#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`](#enum) | `"primary"` | The color type of the TextLink. |
### enum
| type | size |
| :------------ | :--------- |
| `"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](https://web.dev/external-anchors-use-rel-noopener/).
- 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.