Link

InstallationCopy Anchor Link

UsageCopy Anchor Link

import NextLink from "next/link";
import { Link } from "@/components/ui/link";

<Link render={<NextLink href="/services" />}>الخدمات</Link>

Without render, Link renders a plain <a>. Use a Button for actions.

AnatomyCopy Anchor Link

• Root: an <a>, or any element through render.
• Label: the link text.
• External icon (external links): mirrored in RTL.

ExamplesCopy Anchor Link

InlineCopy Anchor Link

Inside running text, set inline. Inline links are always underlined, so they can be told apart without colour (WCAG 1.4.1).

ExternalCopy Anchor Link

external opens a new tab with rel="noopener noreferrer", adds the external-link icon and tells screen readers. Translate the hint with externalLabel:

<Link href="https://dga.gov.sa" external externalLabel="(يفتح في علامة تبويب جديدة)">
  هيئة الحكومة الرقمية
</Link>

RTLCopy Anchor Link

Text and the external-link icon follow the reading direction; the icon is mirrored in Arabic.

AccessibilityCopy Anchor Link

• A real <a href>: works with the keyboard, middle-click and "open in new tab".
• Visited links change colour (link-primary-visited). Hover and pressed also underline.
• Focus ring on :focus-visible only: 2px border-black, 2px offset, white on brand fills.
• A disabled link has no href, cannot be focused and is announced as disabled.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

ContrastCopy Anchor Link