Links
Link Colors
DefaultInherits standard foreground color
AccentColors with active theme brand accent
import { Link } from "@shavin/ui";
{/* Default link: inherits normal text color and underlines on hover */}
<Link href="#">Default text-fg link</Link>
{/* Accent link: colors with the active theme brand accent color */}
<Link href="#" color="accent">Accent color link</Link>Underline Variants
always
Underline is always visible.
hover
Underline appears on hover (default).
none
No underline in any state.
import { Link } from "@shavin/ui";
<Link href="#" underline="always">Always underlined link</Link>
<Link href="#" underline="hover">Hover underlined link (default)</Link>
<Link href="#" underline="none">Link with no underline</Link>Props
| Prop | Type | Default |
|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "lg" |
| weight | "normal" | "medium" | "semibold" | "bold" | "semibold" |
| truncate | "true" | "false" | "false" |