Link

View in Lexicon

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';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const colStyles = {
		backgroundColor: '#E7E7ED',
		border: '1px solid #CDCED9',
		paddingBottom: '.75rem',
		paddingTop: '.75rem',
	};

	return (
		<Provider spritemap="/public/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>;