Avala Design
← Components/primitives

Link

Carbon-spec text link. Three sizes, two visual variants (default, inline). Renders `<a>` by default; use `asChild` to pass through to Next.js `<Link>` or React Router.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Link } from "@avala/design";

<Link size="md">Click me</Link>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-link--defaultOpen in Storybook →

When to use

  • Inline navigational links inside prose / table rows / list rows.
  • Wrap framework router primitives via asChild: <Link asChild><NextLink href=…>.

When not to use

  • Action triggers (submit, save, delete) → use `Button`. Links navigate; buttons act.
  • Icon-only navigational triggers → use `IconButton`.