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 usign Next.js you can use next/link as a parent.

APIs

AttributeTypeAccepted valuesDescriptionDefault
colorSimpleColor boolean stringSimpleColorsChange link colorfalse
hrefstring-Link url-
iconbooleantrue/falseShow link iconfalse
underlinebooleantrue/falseDisplay underlinefalse
blockbooleantrue/falseDisplay as a separate blockfalse
refRef<HTMLAnchorElement | null>-forwardRef-
...AnchorHTMLAttributes'rel', 'target', ...Native props-

Switch types

Simple Colors

type SimpleColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';