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

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


You can use it to navigate between pages.


You can use the color property to change Link color.


You can choose between different styles of links.


You can use the block property to display a separate block.

Show an icon in the Link with the isExternal prop.

If you are using Next.js you can use next/link as a parent.


AttributeTypeAccepted valuesDescriptionDefault
colorLinkColors boolean stringLinkColorsChange link colorfalse
hrefstring-Link url-
isExternal updatedbooleantrue/falseShow link iconfalse
underlinebooleantrue/falseDisplay underlinefalse
blockbooleantrue/falseDisplay as a separate blockfalse
refRef<HTMLAnchorElement | null>-forwardRef-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsa
...AnchorHTMLAttributes'rel', 'target', ...Native props-
type LinkColors =
  | "text"
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "error";
gradient blue backgroundgradient violet background