LinkButton
Interactive component that resembels a button to help users navigate to new pages.
The <LinkButton> component provides a visually distinct, button-like element that functions as a navigational link. It combines the accessibility and semantics of a link with the appearance and interactivity of a button, making it ideal for scenarios where users need a clear call-to-action that leads to another page or resource.
Anatomy
A link button consists of a pressable area, often containing a textual label or icon, which users can press or activate using the Space or Enter keys.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
Variant
Size
| Property | Type | Description |
|---|---|---|
variant | primary | secondary | ghost | destructive | destructive-ghost | link | The available variants of this component. |
size | default | small | large | icon | The available sizes of this component. |
Usage
A link button should be used whenever the primary user action is navigation. It is the ideal choice when you need the visual prominence of a button for a call-to-action that directs the user to a different page or URL. For example, a "Sign Up Now" or "Learn More" element that takes the user to a new registration or features page is a perfect use case. Using a link button ensures that standard browser behaviors, such as opening a link in a new tab or copying the address, are preserved.
In contrast, a regular button is meant for performing an action on the current page. You should use a regular button when the user is submitting a form, opening a modal window, toggling a setting, or saving data without changing the URL. Essentially, if the component's purpose is to do something on the current view, use a button. If it is meant to go somewhere else, use a link button.
Visual Twins
The link button is the button's visual twin, so it must follow all the same guidelines. The only difference is that it's a link used for navigation.
View button guidelinesProps
Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
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?ReactNode;
Children of the component
dir?string;
disabled?boolean;
Disables the button.
Defaults to:
"false"download?string | boolean;
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
fullWidth?boolean;
If true, the element stretches to fill the available width.
Defaults to:
"false"hidden?boolean;
href?string;
A URL to link to. See MDN.
hrefLang?string;
Hints at the human language of the linked URL. SeeMDN.
id?string;
The element's unique identifier. See MDN.
inert?boolean;
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.
onClick?(e: MouseEvent<FocusableElement, MouseEvent>) => void;
Not recommended – use
onPress instead. onClick is an alias for onPress
provided for compatibility with other libraries. onPress provides
additional event details for non-mouse interactions.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.
ref?Ref<HTMLAnchorElement>;
Allows getting a ref to the component instance.
Once the component unmounts, React will set
ref.current to null
(or call the ref with null if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}referrerPolicy?HTMLAttributeReferrerPolicy;
How much of the referrer to send when following the link. See MDN.
rel?string;
The relationship between the linked resource and the current page. See MDN.
render?(
props:
| DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement>
| DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
renderProps: LinkRenderProps,
) => ReactElement<...>;
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?undefined;
Options for the configured client side router.
slot?string | null;
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.target?HTMLAttributeAnchorTarget;
The target window for the link. See MDN.
translate?"yes" | "no";
Alternative components
Last update: 5 months ago