InlineLink renders a plain <a> with an underline and a small hover fade. It
is meant to flow inside prose, caption text, or a compact toolbar label,
where a full button would pull too much weight.
Use InlineLink when the affordance should read as part of the surrounding
sentence. For navigation that deserves its own hit target (a CTA, a card
action, a primary nav entry), reach for <Button asChild> wrapping an
<a> instead.
Import
import { InlineLink } from "@unkey/ui";
Default
Pass a label and an href. The link picks up an underline so it stays
identifiable without href-colored chrome.
With icon on the right
An icon on the right is the common pattern for “go somewhere else” links.
iconPosition defaults to "right".
With icon on the left
Set iconPosition="left" when the icon categorizes the destination (a book
for docs, a key for credentials) rather than signaling direction.
External
For links that leave the app, pair an upward-right arrow with
target="_blank" and rel="noopener noreferrer". Anchor HTML attributes
pass through as rest props.
Accessibility
The icon slot is wrapped in aria-hidden="true", which is the right default
for purely decorative glyphs (a directional arrow next to the label). If the
icon is the only thing carrying meaning (for example, a lock glyph on an
otherwise generic “Settings” link), add alternative text by passing
aria-label on the InlineLink — the icon itself is not announced.
Links that open in a new tab or window should set target="_blank"
alongside rel="noopener noreferrer" so the destination cannot access
window.opener and the referrer is not leaked. When the new-tab behavior is
not obvious from the surrounding copy, mention it in the label or add an
aria-label that does.
Props
href string Required The URL to link to. Passed straight to the underlying <a>.
label string Optional The text to render between the optional icons. Omit to render icon-only
(in which case pair with aria-label).
icon ReactNode Optional A decorative icon rendered next to the label. Wrapped in
aria-hidden="true", so it is not announced to assistive tech.
iconPosition "left" | "right" Optional
Default "right" Which side of the label the icon sits on. right for directional
affordances, left for categorical ones.
className string Optional Additional Tailwind classes. Merged with the built-in
underline inline-flex hover:opacity-70 via cn; later classes win.
...rest AnchorHTMLAttributes<HTMLAnchorElement> Optional All standard anchor attributes (target, rel, aria-label,
onClick, download, etc.) pass through to the underlying <a>.
Related
- Button with
asChild— for link-as-button CTAs that need their own hit target. - Alert — when the linked context deserves its own block of space.