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>

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

Default

You can use it to navigate between pages.

Colors

You can use the color property to change Link color.

Variants

You can choose between different styles of links.

Block

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

Icon

Show an icon in the Link with the icon prop.

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

APIs

AttributeTypeAccepted valuesDescriptionDefault
colorLinkColors boolean stringLinkColorsChange link colorfalse
hrefstring-Link url-
iconbooleantrue/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