Link

A versatile link component supporting multiple styles, underline variants, colors, sizes, icons, external links, and more. Includes helper subcomponents for common navigation and button-like links.

---

Import

import { Link } from '@odyssee/components';
// Helpers (optional)
import { IconLink, ExternalLink, NavLink, ButtonLink, BackLink, NextLink } from '@odyssee/components';

---

Basic Usage

Code Éditable

Résultat

---

Underline Variants

Code Éditable

Résultat

---

Colors

Code Éditable

Résultat

---

Sizes

Code Éditable

Résultat

---

Font Weights

Code Éditable

Résultat

---

Underline Customization

Code Éditable

Résultat

---

Opacity

Code Éditable

Résultat

---

Disabled Link

Code Éditable

Résultat

---

Link with Icon

Code Éditable

Résultat

---

External Link

Code Éditable

Résultat

---

Navigation Link (Active State)

Code Éditable

Résultat

---

Button Link

Code Éditable

Résultat

---

Back/Next Links

Code Éditable

Résultat

---

Props

Name	Type	Default	Description
href	string	—	Link destination (required)
children	Pulse.JSX.Element | ... | string	—	Link content
color	"primary" | "secondary" | "success" | "danger" | "warning" | "dark" | "light" | string	—	Text color
underline	"none" | "always" | "hover" | "focus"	"none"	Underline style
underlineColor	string	—	Underline color (independent from text color)
underlineThickness	"1" | "2" | "4" | "8"	"2"	Underline thickness
underlineOffset	"1" | "2" | "4" | "8" | "auto"	"auto"	Underline offset
opacity	number	—	Link opacity (0-100)
hoverOpacity	number	80	Opacity on hover (0-100)
size	"xs" | "sm" | "base" | "lg" | "xl"	"base"	Font size
weight	"normal" | "medium" | "semibold" | "bold"	"normal"	Font weight
external	boolean	false	Open in new tab
disabled	boolean	false	Disabled state
onClick	(e: Event) => void	—	Click handler
className	string	—	Additional CSS classes
id	string	auto	DOM id (auto-generated if not provided)
style	string	—	Inline styles
...rest	any	—	Other props are spread to the root <a>

IconLink Props

All Link props, plus:

Name	Type	Default	Description
icon	Pulse.JSX.Element | string	—	Icon element or string
iconPosition	"left" | "right"	"left"	Icon position
iconSize	"3" | "4" | "5" | "6"	"4"	Icon size

NavLink Props

All Link props, plus:

Name	Type	Default	Description
active	boolean	false	Active state
activeColor	string	"blue-600"	Color when active

ButtonLink Props

All Link props except underline, plus:

Name	Type	Default	Description
variant	"solid" | "outline" | "ghost" | "soft"	"solid"	Button variant
size	"sm" | "md" | "lg"	"md"	Button size
fullWidth	boolean	false	Full width button

---

Accessibility

• Renders a semantic <a> element.
• Supports keyboard navigation and focus styles.
• Use descriptive link text for clarity.
• Use external for links that open in a new tab (adds rel=\"noopener noreferrer\").
• Disabled links are not focusable or clickable.

---

Best Practices

• Use underline='hover' for most links to indicate interactivity.
• Use color and size to match your design system.
• Prefer ExternalLink for links to external sites.
• Use ButtonLink for actions that look like buttons but navigate.
• Always provide meaningful link text for accessibility.

---

Subcomponents & Helpers

• IconLink: Link with icon (left or right).
• ExternalLink: Opens in new tab, adds external icon.
• NavLink: Navigation link with active state.
• ButtonLink: Link styled as a button.
• BackLink: Link with back arrow.
• NextLink: Link with next arrow.

---