Homecomponentsnavigational

TextLink

A textual link to navigate to a different screen.

Use a TextLink to create navigation links. This component is usually nested within a Text or Heading component.

By default, TextLink routes using NextJS. To disable this and use regular links, see Disabling Next Routing.

Standard Color

Use the color property to set the color of the link.

Contextual Sizes, Weights, and Colors

TextLink can inherit the size, weight, and color from a parent Text or Heading component.

No Underline

Use the noUnderline property to remove the underline from the link on hover.

Disabling Next Routing

Use the noNext property to disable the NextJS routing. This can be useful for links to pages that are routed outside of NextJS.

API

href
Required
The href of the link.
string
children
Required
The text of the link.
ReactNode
id
The ID of the link.
string
color
The color of the link.
inherit
primary
secondary
target
The target of the link.
HTMLAttributeAnchorTarget
onClick
The handler to call when the link is clicked.
MouseEventHandler<HTMLAnchorElement>
noUnderline
Show or hide the underline.
true
false
noNext
Disabled wrapping in NextLink.
true
false
data
An object with the data keys and values.
DataAttributeMap
itemID
string
itemProp
string
itemRef
string
itemScope
true
false
itemType
string
Table of Contents
Standard Color
Contextual Sizes, Weights, and Colors
No Underline
Disabling Next Routing
API