Link

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Navigate to a destination with a real href. The underline and focus ring show that it navigates.

Don't use a link without an href for an action. Use Button instead. When a link opens a new tab, say so in the text and set rel.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

native anchor + shared link class

Keyboard and accessibility

Tab to the link and press Enter to open it. Modifier-key clicks, new tabs, downloads, and hash navigation keep browser defaults.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Link } from '@surflane/ui'

<Link href='/components'>Browse components</Link>
<Link href='https://base-ui.com' target='_blank' rel='noreferrer'>
  Reference (opens in a new tab)
</Link>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens