Navigation

Link

Text link with inline or standalone variants, default or inherit color, an external flag that adds an icon and safe rel attributes, plus a disabled state.

Examples

Inline and external
Loading preview
<Link href="#">Inline link</Link>
<Link href="#" external>External link</Link>

API

PropTypeDefaultDescription
variant'inline' | 'standalone'inlineUnderline treatment.
color'default' | 'inherit'defaultBrand color or inherit the surrounding color.
externalbooleanfalseAdds an icon, target _blank, and rel noopener noreferrer.

Guidelines

Do

  • Use external for links that leave the app.

Avoid

  • Do not use a Link to trigger an action; use a Button.

Import from @hub/ds-components. Interactive playground: Storybook. Figma Code Connect node 188-166.