Documentation

Guide

Getting Started

NextUI + Next.jsUpdated

Theme

Layout

Components

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.

External Link

Show an icon in the Link with the isExternal prop.

Next.js Link

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

APIs

Link Props

Attribute	Type	Accepted values	Description	Default
color	`LinkColors` `boolean` `string`	LinkColors	Change link color	`false`
href	`string`	-	Link url	-
isExternal `updated`	`boolean`	`true/false`	Show link icon	`false`
underline	`boolean`	`true/false`	Display underline	`false`
block	`boolean`	`true/false`	Display as a separate block	`false`
ref	`Ref<HTMLAnchorElement \| null>`	-	forwardRef	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`a`
...	`AnchorHTMLAttributes`	`'rel', 'target', ...`	Native props	-

Link types

Link Colors

type LinkColors =
  | "text"
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "error";

Text User