Foundation component · Navigation

Quick Link

A compact contextual link with stable icon geometry and progressive hover affordance.

Live playground

Choose Quick Link when

Use for compact contextual destinations such as settings and team resources.
Keep labels short enough to remain a single line.

Accessibility

Use render composition with a real link when the action navigates.
The trailing chevron is decorative and does not duplicate the accessible name.

Implementation

Base UI owns button and render composition behavior; both icon slots remain consumer-controlled.

import { QuickLink } from "@lenso/ui/quick-link";

<QuickLink
  render={<Link href="/settings" />}
  nativeButton={false}
  leadingIcon={<SettingsIcon />}
  trailingIcon={<ChevronRightIcon />}
>
  Team settings
</QuickLink>;