Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.

installyarn add @clayui/link
versionNPM Version
useimport Link from '@clayui/link';

Basic Usage

By default, when using ClayLink your component will be rendered as an anchor.

With Context

Additionally, if you want to customize every Link component in your app, you are able to do so by using <ClayLinkContext.Provider />.

Snippet

API Reference

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLAnchorElement>>
Parameters
Properties

block

boolean | undefined

Renders the button as a block element.

borderless

boolean | undefined

Flag to indicate if link should be borderless.

button

boolean | { block?: boolean; monospaced?: boolean; small?: boolean; } | undefined

Config for button props

decoration

"none" | "underline" | null | undefined

Indicates if the text should be underlined

displayType

"secondary" | "unstyled" | "primary" | "danger" | "tertiary" | undefined

Determines how the link is displayed.

fontSize

Number | undefined

Sets the text size based on a number scale.

messages

{ opensNewWindow: string; } | undefined

Messages used for announcement to SR. Use this for internationalization.

monospaced

boolean | undefined

Flag to indicate if the link should be monospaced.

outline

boolean | undefined

Flag to indicate if the link should use the outlined style.

small

boolean | undefined

Indicates whether the button should use the small variant.

weight

"normal" | "semi-bold" | undefined

Determines the font-weight of the link.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Selena Aungst, Krešimir Čoko, Patrick Yeo

Last edited May 9, 2025 at 6:15:38 AM