TextLink
A text link component that can be used to navigate to other pages.
The TextLink component is built on top of the Link component from Next.js.
It comes with additional features such as hover effects, icon support, and more.
If you don't need any of the additional features, you can use Next.js's built-in Link component.
Usage
javascript
1import TextLink from "@/components/atoms/TextLink"; 2 3<TextLink href="/docs/components/text-link"> 4 Go to TextLink 5</TextLink>
Props
The TextLink component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the link. |
| href | string | - | The URL to navigate to when the link is clicked. |
| color | string | gray | The color of the link (see tailwind.config). |
| icon | Icon | - | An optional icon to display before the text. |
| scale | boolean | false | If true, the link will grow on hover. |
| lift | boolean | false | If true, the link will lift on hover. |
| fade | boolean | false | If true, the link will fade on hover. |
| underline | boolean | false | If true, the link will be underlined on hover. |
| active | boolean | true | If true, the link will be underlined when active. |
| underlineClassName | string | "" | Additional classes for the underline. |
| underlineHeight | number | 1 | Height of the underline (in px). |
| underlineOffset | number | 10 | Offset of the underline (in px). |
| className | string | "" | Additional Tailwind classes for the container. |
| ...props | object | - | Any other valid <a> attributes (e.g. target, rel, etc.). |
Examples
Basic Text Link
You can use different hover effects (scale, lift, fade, underline), colors (color), and active states (active) to customize the link.