Link

Installation

npx usmds add link

import { Link } from '@components/Link';
 
<Link href="#" label="Link text" />

Extends Pressable props.

Prop	Type	Default	Description
href	`string`	-	The URL that the link points to.
label	`string`	-	The text content of the link.
variant	`'default' \| 'visited' \| 'dark-background'`	`'default'`	The visual style variant of the link.
external	`boolean`	`false`	When true, displays an external link icon.
visited	`boolean`	`false`	When true, applies visited link styling.
focus	`boolean`	`false`	When true, applies focus ring styling.
className	`string`	-	Additional Tailwind classes to apply.

<Link href="#" label="Link" />

<Link 
  href="https://example.com" 
  label="External link" 
  external 
/>

<Link 
  href="#" 
  label="Visited link" 
  visited 
/>

<View className="bg-base-darker p-4">
  <Link 
    href="#" 
    label="Link on dark background" 
    variant="dark-background" 
  />
</View>

<Link 
  href="#" 
  label="Focused link" 
  focus 
/>

The Link component uses Tailwind CSS classes for styling through class-variance-authority (cva). Default styling includes:

Links have several visual states:

The Link component: