Link

The Link component is built on top of Next.js's Link component. It supports extensible style variants and can render its content as a child component maintaining consistent link behavior and styling.

Examples

Default

Preview

Default Link

Code

<Link href='#default' variant='default'>
  Default Link
</Link>

Unstyled

Preview

Unstyled Link

Code

import { Link } from '@hv/ui/link';

<Link href="#unstyled" variant="unstyled">
  Unstyled Link
</Link>

asChild with Button

Preview

Code

import { Link } from '@hv/ui/link';
import { Button } from '@hv/ui/button';

<Link asChild>
  <Button onClick={handleClick} variant='ghost'>Call to Action</Button>
</Link>

Props

Link Props

Property	Description	Values
href	Destination URL	String
className	Custom CSS classes for styling	String
variant	Controls the visual style of the link	default unstyled
size	Reserved for controlling the size of the link	default
asChild	Renders the link as a child slot	Boolean
children	The content inside the link	ReactNode
props	Additional properties from Next.js Link	NextLinkProps

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, you can pass className overrides for specific instances.