Link

Link navigates to another URL or route. Use Button for an action such as saving, submitting, or opening a dialog.

import { Link } from '@luke-ui/react/link';

<Link href="/help">Help centre</Link>;

Tone

accent is the default tone and draws attention to the destination. Use neutral when a link sits within content that needs more visual emphasis.

Inline and standalone links

Use the default link inside a sentence. Its underline remains visible so people can recognise it in running text.

Set isStandalone for a link outside prose, such as a card link or navigation item. Standalone links show their underline on hover or press and have a 24 × 24 CSS-pixel structural target.

Disabled links

Set isDisabled only when a destination is temporarily unavailable. A disabled link cannot receive focus or be activated. Explain why nearby when someone needs that information.

Accessibility

Write link text that names the destination and makes sense outside its surrounding sentence. Avoid generic labels such as “Click here”.