# Link (/components/actions/link)
`Link` navigates to another URL or route. Use [`Button`](/components/actions/button) for an action
such as saving, submitting, or opening a dialog.
apps/docs/src/examples/link/basic.tsx
```tsx
import { Link } from '@luke-ui/react/link';
export default () => {
return Example destination;
};
```
## Appearance [#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.
apps/docs/src/examples/link/appearance.tsx
```tsx
import { Link } from '@luke-ui/react/link';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
Example destination
Example destination
);
};
```
## Prominence [#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.
apps/docs/src/examples/link/prominence.tsx
```tsx
import { Link } from '@luke-ui/react/link';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
Example destination
Example destination
Example destination
);
};
```
## Presentation reference [#presentation-reference]
apps/docs/src/examples/link/presentation-reference.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Link } from '@luke-ui/react/link';
import { Text } from '@luke-ui/react/text';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
Text
Example destination
Example destination
Example destination
Button
Example destination
Example destination
Example destination
);
};
```
## Disabled [#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.
apps/docs/src/examples/link/disabled.tsx
```tsx
import { Link } from '@luke-ui/react/link';
export default () => {
return (
Example destination
);
};
```
## Accessibility [#accessibility]
Write link text that names the destination and makes sense outside its surrounding sentence. Avoid
generic labels such as “Click here”.
## API [#api]