- Components
- Navigation
- Link
Link
Link allows a user to navigate to another page or resource within a web page or application.
Installation
CLI
Manual
npm
pnpm
yarn
bun
Options
Variant
Use the variant prop to control the appearance of the link.
Follow @mehdibha_ to stay updated on dotUI latest releases.
Follow @mehdibha_ to stay updated on dotUI latest releases.
variants.tsx
Disabled
Use the isDisabled prop to disable the link.
@mehdibha_
disabled.tsx
Examples
With icon
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'accent' | 'quiet' | 'accent' | The visual style of the Link. |
isDisabled | boolean | - | Whether the link is disabled. |
autoFocus | boolean | - | Whether the element should receive focus on render. |
href | Href | - | A URL to link to. |
hrefLang | string | - | Hints at the human language of the linked URL. |
target | HTMLAttributeAnchorTarget | - | The target window for the link. |
rel | string | - | The relationship between the linked resource and the current page. |
download | boolean | string | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. |
ping | string | - | A space-separated list of URLs to ping when the link is followed. |
referrerPolicy | HTMLAttributeReferrerPolicy | - | How much of the referrer to send when following the link. |
routerOptions | RouterOptions | - | Options for the configured client side router. |
children | ReactNode | (values: LinkRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode | - | The children of the component. A function may be provided to alter the children based on component state. |
className | string | - | The CSS className for the element. |
style | CSSProperties | (values: LinkRenderProps & {defaultStyle: CSSProperties}) => CSSProperties | - | The inline style for the element. A function may be provided to compute the style based on component state. |
| Event | Type | Description |
|---|---|---|
onPress | (e: PressEvent) => void | Handler that is called when the press is released over the target. |
onPressStart | (e: PressEvent) => void | Handler that is called when a press interaction starts. |
onPressEnd | (e: PressEvent) => void | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
onPressChange | (isPressed: boolean) => void | Handler that is called when the press state changes. |
onPressUp | (e: PressEvent) => void | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
onFocus | (e: FocusEvent<Target>) => void | Handler that is called when the element receives focus. |
onBlur | (e: FocusEvent<Target>) => void | Handler that is called when the element loses focus. |
onFocusChange | (isFocused: boolean) => void | Handler that is called when the element's focus status changes. |
onKeyDown | (e: KeyboardEvent) => void | Handler that is called when a key is pressed. |
onKeyUp | (e: KeyboardEvent) => void | Handler that is called when a key is released. |
onHoverStart | (e: HoverEvent) => void | Handler that is called when a hover interaction starts. |
onHoverEnd | (e: HoverEvent) => void | Handler that is called when a hover interaction ends. |
onHoverChange | (isHovering: boolean) => void | Handler that is called when the hover state changes. |
| Data attribute | Description |
|---|---|
[data-current] | Whether the link is the current item within a list. |
[data-hovered] | Whether the link is currently hovered with a mouse. |
[data-pressed] | Whether the link is currently in a pressed state. |
[data-focused] | Whether the link is focused, either via a mouse or keyboard. |
[data-focus-visible] | Whether the link is keyboard focused. |
[data-disabled] | Whether the link is disabled. |