Link | Arbol UI

Language

Appearance

Inside a sentence

No campaigns are running. Create a campaign to start calling your contacts.

import { Link } from '@arbol-ai/ui';

<p className="text-sm">
  No campaigns are running. <Link href="#/link">Create a campaign</Link> to start calling your
  contacts.
</p>

Muted

For secondary navigation that should not draw the eye.

Recent appointmentsView all

import { Link } from '@arbol-ai/ui';

<div className="flex items-center justify-between gap-4 text-sm">
  <span className="font-medium">Recent appointments</span>
  <Link href="#/link" variant="muted">
    View all
  </Link>
</div>

Plain

No color, weight or underline of its own, for a link styled by its classes or its content, such as a name in a table.

Front desk agent12 calls today

import { Link } from '@arbol-ai/ui';

<div className="rounded-card flex max-w-md items-center justify-between border px-4 py-2 text-sm">
  <Link className="data-hovered:text-brand-accent truncate font-medium" href="#/link" variant="plain">
    Front desk agent
  </Link>
  <span className="text-muted-foreground">12 calls today</span>
</div>

Opens a new tab

target=“_blank” adds rel=“noopener noreferrer” unless the link sets its own rel.

The React Aria Link documentation

import { Link } from '@arbol-ai/ui';

<Link className="text-sm" href="https://react-aria.adobe.com/Link" target="_blank">
  The React Aria Link documentation
</Link>

Source

The examples above are src/components/link/link.examples.tsx, which the library’s tests render too.