Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.
install | yarn add @clayui/link |
---|
version |  |
---|
use | import Link from '@clayui/link'; |
---|
Basic Usage
By default, when using ClayLink your component will be rendered as an anchor.
import {Provider} from '@clayui/core';
import Link from '@clayui/link';
import React from 'react';
export default function App() {
const colStyles = {
backgroundColor: '#E7E7ED',
border: '1px solid #CDCED9',
paddingBottom: '.75rem',
paddingTop: '.75rem',
};
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<Link displayType="primary" href="#link-styles">
Primary
</Link>
</div>
</Provider>
);
}
With Context
Additionally, if you want to customize every Link component in your app, you are able to do so by using <ClayLinkContext.Provider />
.
const ConfirmBeforeNavigate = ({children, href, ...otherProps}) => (
<a
{...otherProps}
href={href}
onClick={(e) =>
window.confirm('r u sure?') ? undefined : e.preventDefault()
}
>
{children}
</a>
);
<ClayLinkContext.Provider value={ConfirmBeforeNavigate}>
<div>
<ClayLink href="#">Click me</ClayLink>
</div>
</ClayLinkContext.Provider>;
API Reference
Link
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>> | nullEdit this page on GitHubContributors
Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Selena Aungst, Krešimir Čoko, Patrick Yeo
Last edited May 9, 2025 at 6:15:38 AM