# 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;
};
```
## Tone [#tone]
`accent` is the default tone. Use `neutral` for supporting links that should not compete with the
main content.
apps/docs/src/examples/link/tones.tsx
```tsx
import { Link } from '@luke-ui/react/link';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
Example destination
Example destination
);
};
```
## Inline and standalone [#inline-and-standalone]
Use the default treatment inside a sentence. Its underline stays visible so the destination is
recognisable in running text.
Set `isStandalone` for a link outside prose, such as a card link or navigation item. It shows its
underline on hover or press and has a 24 × 24 CSS-pixel structural target.
apps/docs/src/examples/link/standalone.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Link } from '@luke-ui/react/link';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
An inline example link sits within a sentence.
Standalone example link
);
};
```
## 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]