Link

Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>

Storybook @nextui-org/link React Aria Source Styles source

We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀

Installation

npx nextui-cli@latest add link

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Disabled

Sizes

Colors

Underline

External

If you pass the isExternal prop, the link will have the target="_blank" and rel="noopener noreferrer" attributes.

Custom Anchor Icon

Block Link

If you pass the isBlock prop, the link will be rendered as a block element with a hover effect.

Polymorphic Component

NextUI components expose a as prop that allows you to customize the React element type that is used to render the component.

Routing

The <Link> component works with frameworks and client side routers like Next.js and React Router. See the Routing guide to learn how to set this up.

import {Link} from "@nextui-org/react";

function App() {
  return (
    <>
      <Link href="/home">Home</Link>
      <Link href="/about">About</Link>
    </>
  );
}

Custom Implementation

In case you need to customize the link even further, you can use the useLink hook to create your own implementation.

Data Attributes

Link has the following attributes on the base element:

data-focus: When the link is being focused. Based on useFocusRing
data-focus-visible: When the link is being focused with the keyboard. Based on useFocusRing
data-disabled: When the link is disabled. Based on isDisabled prop.

Accessibility

Support for mouse, touch, and keyboard interactions.
Support for navigation links via <a> elements or custom element types via ARIA.
Support for disabled links.
Keyboard users may activate links using the Enter key.

API

Link Props

Attribute	Type	Description	Default
size	`sm` \| `md` \| `lg`	The size of the link.	`md`
color	`foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	The color of the link.	`primary`
underline	`none` \| `hover` \| `always` \| `active` \| `focus`	The underline of the link.	`none`
href	`string`	A URL to link to. See MDN.	-
target	`HTMLAttributeAnchorTarget`	The target window for the link. See MDN.	-
rel	`string`	The relationship between the linked resource and the current page. See MDN.	-
download	`boolean` \| `string`	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.	-
ping	`string`	A space-separated list of URLs to ping when the link is followed. See MDN.	-
referrerPolicy	`HTMLAttributeReferrerPolicy`	How much of the referrer to send when following the link. See MDN.	-
isExternal	`boolean`	Whether the link should open in a new tab.	`false`
showAnchorIcon	`boolean`	Whether to show the anchor icon.	`false`
anchorIcon	`ReactNode`	The anchor icon.	-
isBlock	`boolean`	Whether the link should be rendered as block with a hover effect.	`false`
isDisabled	`boolean`	Whether the link is disabled.	`false`
disableAnimation	`boolean`	Whether to disable link and block animations.	`false`

Link Events

Attribute	Type	Description	Default
onPress	`(e: PressEvent) => void`	Handler called when the press is released over the target.	-
onPressStart	`(e: PressEvent) => void`	Handler called when a press interaction starts.	-
onPressEnd	`(e: PressEvent) => void`	Handler called when a press interaction ends, either over the target or when the pointer leaves the target.	-
onPressChange	`(isPressed: boolean) => void`	Handler called when the press state changes.	-
onPressUp	`(e: PressEvent) => void`	Handler called when a press is released over the target, regardless of whether it started on the target or not.	-
onKeyDown	`(e: KeyboardEvent) => void`	Handler called when a key is pressed.	-
onKeyUp	`(e: KeyboardEvent) => void`	Handler called when a key is released.	-
onClick	`MouseEventHandler`	The native link click event handler (Deprecated) use onPress instead.	-