Link
A link allows a user to navigate to another page or resource within a web page or application.
Preview
Code
Examples
Custom Styling
Preview
Code
With Icon
Preview
Code
Props
Name | Type | Default |
|---|---|---|
target | HTMLAttributeAnchorTarget | — |
href | string | — |
onFocus | ((e: FocusEvent<Element, Element>) => void) | — |
onBlur | ((e: FocusEvent<Element, Element>) => void) | — |
onKeyDown | ((e: KeyboardEvent) => void) | — |
onKeyUp | ((e: KeyboardEvent) => void) | — |
onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) | — |
isDisabled | boolean | — |
onPress | ((e: PressEvent) => void) | — |
onPressStart | ((e: PressEvent) => void) | — |
onPressEnd | ((e: PressEvent) => void) | — |
onPressChange | ((isPressed: boolean) => void) | — |
onPressUp | ((e: PressEvent) => void) | — |
autoFocus | boolean | — |
onFocusChange | ((isFocused: boolean) => void) | — |
hrefLang | string | — |
rel | string | — |
download | string | boolean | — |
ping | string | — |
referrerPolicy | HTMLAttributeReferrerPolicy | — |
routerOptions | undefined | — |
onHoverStart | ((e: HoverEvent) => void) | — |
onHoverEnd | ((e: HoverEvent) => void) | — |
onHoverChange | ((isHovering: boolean) => void) | — |
children | ReactNode | ((values: LinkRenderProps & { defaultChildren: ReactNode; }) => ReactNode) | — |
className | string | ((values: LinkRenderProps & { defaultClassName: string; }) => string) | — |
style | CSSProperties | ((values: LinkRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
slot | string | null | — |
ref | Ref<HTMLAnchorElement> | — |
key | Key | null | — |