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

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

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.

Usage with Next.js

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

AttributeTypeDescriptionDefault
hrefstringThe URL to link to.-
sizesm | md | lgThe size of the link.md
colorforeground | primary | secondary | success | warning | dangerThe color of the link.primary
underlinenone | hover | always | active | focusThe underline of the link.none
isExternalbooleanWhether the link should open in a new tab.false
showAnchorIconbooleanWhether to show the anchor icon.false
anchorIconReactNodeThe anchor icon.-
isBlockbooleanWhether the link should be rendered as block with a hover effect.false
isDisabledbooleanWhether the link is disabled.false
disableAnimationbooleanWhether to disable link and block animations.false
AttributeTypeDescriptionDefault
onPress(e: PressEvent) => voidHandler called when the press is released over the target.-
onPressStart(e: PressEvent) => voidHandler called when a press interaction starts.-
onPressEnd(e: PressEvent) => voidHandler called when a press interaction ends, either over the target or when the pointer leaves the target.-
onPressChange(isPressed: boolean) => voidHandler called when the press state changes.-
onPressUp(e: PressEvent) => voidHandler called when a press is released over the target, regardless of whether it started on the target or not.-
onKeyDown(e: KeyboardEvent) => voidHandler called when a key is pressed.-
onKeyUp(e: KeyboardEvent) => voidHandler called when a key is released.-
onClickMouseEventHandlerThe native link click event handler (Deprecated) use onPress instead.-