Luke UI
GitHub repository

Link

A styled link for navigation.

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

Link: Basic
Loading Link: Basic example

Appearance

text is the default. Use it in prose and navigation lists. Set appearance="button" when the destination needs a button-shaped call to action. A button-shaped Link remains a link and keeps its native navigation behaviour.

Link: Appearance
Loading Link: Appearance example

Prominence

standard is the default. Choose low for quiet navigation and high for a primary destination. High prominence uses the theme’s primary accent treatment. Standard and high prominence text Links are underlined at rest and drop the underline on hover and press. Low prominence does the opposite. Focus always underlines, and press shifts the text colour.

Link: Prominence
Loading Link: Prominence example

Presentation reference

Link: Presentation reference
Loading Link: Presentation reference example

Disabled

Set isDisabled only when a destination is temporarily unavailable. Disabled links cannot receive focus or respond to activation. Explain why nearby when someone needs that information.

Link: Disabled
Loading Link: Disabled example

Accessibility

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

API

LinkProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Prop

Type