Link

A styled link component with optional icon, underline effects, and smart text formatting for enhanced hover interactions.

Learn more about our services

'use client';

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

export function LinkDemo() {
  return <Link label="Learn more about our services" href="#" icon="ArrowDefaultRight" />;
}

Installation


npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/link.json

Usage

import Link from '@/docs/lib/ui/link';
 
export function Component() {
  return (
    <div>
      <Link label="View documentation" href="/docs" icon="ArrowDefaultRight" />
    </div>
  );
}

API Reference

Link

Prop	Type	Default	Description
`label`	`string`	Required	The text content of the link. This text is intelligently split to apply hover effects and accommodate icons.
`icon`	`IconicNames`	`undefined`	Optional icon to display after the link text. Icons from `@clubmed/trident-icons` library.
`iconType`	`IconicTypes`	`undefined`	The type/style of the icon to display (e.g., `"ArrowDefault"`, `"ArrowTail"`).
`width`	`string`	`"24px"`	The width of the icon. Accepts any valid CSS width value.
`underlined`	`boolean`	`true`	Whether the link text should have an underline effect on hover.
`className`	`string`	`undefined`	Additional CSS classes to apply to the link container. Merged with default classes using `tailwind-merge`.
`inert`	`boolean`	`undefined`	If `true`, renders the link as a `<span>` instead of an anchor, making it non-clickable but styled as a link (useful when the link is part of a larger clickable element).
`component`	`string \| FunctionComponent<PropsWithChildren<any>>`	`"a"`	Custom component to render instead of the default anchor tag. Useful for integrating with routing libraries (e.g., Next.js `Link`, React Router `Link`).

The Link component also accepts all standard HTML anchor attributes (e.g., href, target, rel, onClick) via AnchorHTMLAttributes<HTMLAnchorElement>.

Notes

Smart Text Formatting: The component intelligently splits the label text to apply special formatting. The first character and the last word (after the final space) receive hover effects for enhanced visual feedback.
Icon Integration: When an icon is provided, it's positioned after the link text with an 8px inline-start margin for proper spacing.
Polymorphic Component: Use the component prop to render the link with custom components like Next.js Link or React Router Link while maintaining the same styling and behavior.
Inert Mode: The inert prop is useful when the link is nested inside another clickable element. It prevents event bubbling conflicts while maintaining visual consistency.
Underline Effects: The default underline styling provides sophisticated hover interactions that work well with the text splitting logic.
Accessibility: When using custom components via the component prop, ensure they maintain proper link semantics for screen readers and keyboard navigation.

Image Loader

On This Page

Installation Usage API Reference Link Notes