Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an
If you pass the
isExternal prop, the link will have the
rel="noopener noreferrer" attributes.
If you pass the
isBlock prop, the link will be rendered as a block element with a
NextUI components expose a
as prop that allows you to customize the React element type that is used to render the component.
In case you need to customize the link even further, you can use the
useLink hook to create your own implementation.
Link has the following attributes on the
- 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
When the link is disabled. Based on
- 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.
|href||The URL to link to.||-|
|size||The size of the link.|
|color||The color of the link.|
|underline||The underline of the link.|
|isExternal||Whether the link should open in a new tab.|
|showAnchorIcon||Whether to show the anchor icon.|
|anchorIcon||The anchor icon.||-|
|isBlock||Whether the link should be rendered as block with a hover effect.|
|isDisabled||Whether the link is disabled.|
|disableAnimation||Whether to disable link and block animations.|
|onPress||Handler called when the press is released over the target.||-|
|onPressStart||Handler called when a press interaction starts.||-|
|onPressEnd||Handler called when a press interaction ends, either over the target or when the pointer leaves the target.||-|
|onPressChange||Handler called when the press state changes.||-|
|onPressUp||Handler called when a press is released over the target, regardless of whether it started on the target or not.||-|
|onKeyDown||Handler called when a key is pressed.||-|
|onKeyUp||Handler called when a key is released.||-|
|onClick||The native link click event handler (Deprecated) use onPress instead.||-|