Link

Link is an accessible element for navigation.

Import

import { Link } from "@recastui/react";

Usage

Editable Example

<Link>Recast UI</Link>

External link

Editable Example

<Link href='https://recastui.com' isExternal>
  Recast Design system</Link>

Link inline with text

Editable Example

<div>
	Did you know that{' '}
  <Link href='#'>
    links can live inline with text
  </Link>
	</div>

Link colors

Editable Example

<div>
	<div className="grid gap-2 grid-cols-3 lg:grid-cols-5">
		<Link color='tomato' href='#tomato'>tomato</Link>
		<Link color='red' href='#red'>red</Link>
		<Link color='crimson' href='#crimson'>crimson</Link>
		<Link color='pink' href='#pink'>pink</Link>
		<Link color='plum' href='#plum'>plum</Link>
		<Link color='purple' href='#purple'>purple</Link>
		<Link color='violet' href='#violet'>violet</Link>
		<Link color='indigo' href='#indigo'>indigo</Link>
		<Link color='blue' href='#blue'>blue</Link>
		<Link color='cyan' href='#cyan'>cyan</Link>
		<Link color='teal' href='#teal'>teal</Link>
		<Link color='green' href='#green'>green</Link>
		<Link color='grass' href='#grass'>grass</Link>
		<Link color='orange' href='#orange'>orange</Link>
		<Link color='brown' href='#brown'>brown</Link>
		<Link color='sky' href='#sky'>sky</Link>
		<Link color='mint' href='#mint'>mint</Link>
		<Link color='yellow' href='#yellow'>yellow</Link>
		<Link color='amber' href='#amber'>amber</Link>
		<Link color='gold' href='#gold'>gold</Link>
		<Link color='bronze' href='#bronze'>bronze</Link>
	</div>
</div>