Link

Guidelines React

Github Storybook Markdown Copy for LLM

The Link component is an anchor element that can be used to navigate to different pages or sections within a page. It is styled to look like a standard link.

Import

import { Link } from "@cfa/react-core";

Live Editor

Examples

Disabled

The isDisabled prop can be used to disable the link. This will prevent the link from being clickable and will apply a disabled style.

Inline

The inline prop can be used to display the link inline with other elements. This will remove the default block display style.

With Icon

Props

Visit the Documentation Site for the full list of props.

link

Name	Type	Default	Description
inline	boolean	-	-
aria-describedby	string	-	Identifies the element (or elements) that describes the object.
aria-details	string	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	string	-	Defines a string value that labels the current element.
aria-labelledby	string	-	Identifies the element (or elements) that labels the current element.
autoFocus	boolean	-	Whether the element should receive focus on render.
children	ChildrenOrFunction<LinkRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
className	ClassNameOrFunction<LinkRenderProps>	'react-aria-Link'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
dir	string	-	-
download	string | boolean	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
hidden	boolean	-	-
href	string	-	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
hrefLang	string	-	Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
id	string	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	boolean	-	-
isDisabled	boolean	-	Whether the link is disabled.
lang	string	-	-
onAnimationEnd	AnimationEventHandler<HTMLAnchorElement>	-	-
onAnimationEndCapture	AnimationEventHandler<HTMLAnchorElement>	-	-
onAnimationIteration	AnimationEventHandler<HTMLAnchorElement>	-	-
onAnimationIterationCapture	AnimationEventHandler<HTMLAnchorElement>	-	-
onAnimationStart	AnimationEventHandler<HTMLAnchorElement>	-	-
onAnimationStartCapture	AnimationEventHandler<HTMLAnchorElement>	-	-
onAuxClick	MouseEventHandler<HTMLAnchorElement>	-	-
onAuxClickCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onBlur	(e: FocusEvent<Element, Element>) => void	-	Handler that is called when the element loses focus.
onClickCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onContextMenu	MouseEventHandler<HTMLAnchorElement>	-	-
onContextMenuCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onDoubleClick	MouseEventHandler<HTMLAnchorElement>	-	-
onDoubleClickCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onFocus	(e: FocusEvent<Element, Element>) => void	-	Handler that is called when the element receives focus.
onFocusChange	(isFocused: boolean) => void	-	Handler that is called when the element's focus status changes.
onGotPointerCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onGotPointerCaptureCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onHoverChange	(isHovering: boolean) => void	-	Handler that is called when the hover state changes.
onHoverEnd	(e: HoverEvent) => void	-	Handler that is called when a hover interaction ends.
onHoverStart	(e: HoverEvent) => void	-	Handler that is called when a hover interaction starts.
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.
onLostPointerCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onLostPointerCaptureCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onMouseDown	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseDownCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseEnter	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseLeave	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseMove	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseMoveCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseOut	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseOutCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseOver	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseOverCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseUp	MouseEventHandler<HTMLAnchorElement>	-	-
onMouseUpCapture	MouseEventHandler<HTMLAnchorElement>	-	-
onPointerCancel	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerCancelCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerDown	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerDownCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerEnter	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerLeave	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerMove	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerMoveCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerOut	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerOutCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerOver	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerOverCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerUp	PointerEventHandler<HTMLAnchorElement>	-	-
onPointerUpCapture	PointerEventHandler<HTMLAnchorElement>	-	-
onPress	(e: PressEvent) => void	-	Handler that is called when the press is released over the target.
onPressChange	(isPressed: boolean) => void	-	Handler that is called when the press state changes.
onPressEnd	(e: PressEvent) => void	-	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart	(e: PressEvent) => void	-	Handler that is called when a press interaction starts.
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.
onScroll	UIEventHandler<HTMLAnchorElement>	-	-
onScrollCapture	UIEventHandler<HTMLAnchorElement>	-	-
onTouchCancel	TouchEventHandler<HTMLAnchorElement>	-	-
onTouchCancelCapture	TouchEventHandler<HTMLAnchorElement>	-	-
onTouchEnd	TouchEventHandler<HTMLAnchorElement>	-	-
onTouchEndCapture	TouchEventHandler<HTMLAnchorElement>	-	-
onTouchMove	TouchEventHandler<HTMLAnchorElement>	-	-
onTouchMoveCapture	TouchEventHandler<HTMLAnchorElement>	-	-
onTouchStart	TouchEventHandler<HTMLAnchorElement>	-	-
onTouchStartCapture	TouchEventHandler<HTMLAnchorElement>	-	-
onTransitionCancel	TransitionEventHandler<HTMLAnchorElement>	-	-
onTransitionCancelCapture	TransitionEventHandler<HTMLAnchorElement>	-	-
onTransitionEnd	TransitionEventHandler<HTMLAnchorElement>	-	-
onTransitionEndCapture	TransitionEventHandler<HTMLAnchorElement>	-	-
onTransitionRun	TransitionEventHandler<HTMLAnchorElement>	-	-
onTransitionRunCapture	TransitionEventHandler<HTMLAnchorElement>	-	-
onTransitionStart	TransitionEventHandler<HTMLAnchorElement>	-	-
onTransitionStartCapture	TransitionEventHandler<HTMLAnchorElement>	-	-
onWheel	WheelEventHandler<HTMLAnchorElement>	-	-
onWheelCapture	WheelEventHandler<HTMLAnchorElement>	-	-
ping	string	-	A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
referrerPolicy	HTMLAttributeReferrerPolicy	-	How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
rel	string	-	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
render	(props: any, renderProps: LinkRenderProps) => ReactElement<unknown, string | JSXElementConstructor<any>>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element. Requirements: * You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
routerOptions	never	-	Options for the configured client side router.
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
style	StyleOrFunction<LinkRenderProps>	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
target	HTMLAttributeAnchorTarget	-	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
translate	"yes" | "no"	-	-