Link

The Link component provides styled links for navigation within and outside the application. It offers two size options and distinguishes between internal and external links with appropriate visual indicator. The component ensures consistent styling while maintaining accessibility standards.

Usage

import { Link } from '@harnessio/ui/components'

// ...

return (
  <Link to="/your-url-here">Username</Link>
)

API Reference

The Link component allows for the creation of accessible hyperlinks with consistent styling. It supports multiple visual variants, sizes, and icon placements to enhance navigation experiences throughout the application.

<Link
  to="/your-url-here"
  className="additional-classes" // [OPTIONAL] Additional CSS classes to apply to the link
  variant="secondary" // [OPTIONAL] The style variant of the link
  prefixIcon // [OPTIONAL] Displays an icon before the link text
  suffixIcon // [OPTIONAL] Displays an icon after the link text
  disabled // [OPTIONAL] Disables the link, preventing clicks and changing its appearance
  size="sm" // [OPTIONAL] The size of the link
>
  Link Text
</Link>

Prop	Required	Default	Type
to	true		string
variant	false	'default'	'default' | 'secondary'
size	false	'default'	'default' | 'sm'
prefixIcon	false	'chevron-left'	'boolean' | IconProps['name']
suffixIcon	false	'arrow-to-top-right'	'boolean' | IconProps['name']
disabled	false	false	boolean
className	false		string