Link
Link de texto para navegar entre páginas ou para sites externos, com opção de abrir em nova aba.
'use client';
import { Link } from '@/components/ui/link';
export default function LinkDemo() {
return <Link href="#">Ver política de cancelamento</Link>;
}Instalação
npx shadcn@latest add @lenstech/linkUso
import { Link } from "@/components/ui/link"<Link href="/servicos">Conheça nossos serviços</Link>Exemplos
Link externo
Com isExternal o link abre em nova aba (target="_blank" + rel="noopener noreferrer"), mostra o ícone ↗ e avisa o leitor de tela com "(abre em nova aba)". Use hideExternalIcon para esconder só o ícone.
'use client';
import { Link } from '@/components/ui/link';
export default function LinkExternal() {
return (
<div className="flex flex-col items-center gap-3">
<Link href="https://wa.me/5519988887777" isExternal>
Falar no WhatsApp
</Link>
<Link href="https://maps.google.com" isExternal hideExternalIcon>
Como chegar (sem ícone)
</Link>
</div>
);
}Prefira isExternal a target="_blank"
Passar target="_blank" na mão funciona, mas você perde o rel seguro, o ícone e o aviso acessível.
Com isExternal, os valores de target e rel que você passar são ignorados.
Dentro de um texto
Em parágrafos, adicione className="underline" para que o link seja reconhecido sem depender só da cor.
Ao confirmar o agendamento você concorda com os termos de uso e com a política de privacidade da Clínica Sorriso Pleno.
'use client';
import { Link } from '@/components/ui/link';
export default function LinkInline() {
return (
<p className="max-w-md text-sm text-muted-foreground">
Ao confirmar o agendamento você concorda com os{' '}
<Link href="#" className="underline">
termos de uso
</Link>{' '}
e com a{' '}
<Link href="#" className="underline">
política de privacidade
</Link>{' '}
da Clínica Sorriso Pleno.
</p>
);
}Página atual
Com aria-current="page" o link fica em negrito e na cor do texto — útil em menus simples.
'use client';
import { Link } from '@/components/ui/link';
const links = [
{ label: 'Início', href: '#' },
{ label: 'Serviços', href: '#', current: true },
{ label: 'Equipe', href: '#' },
{ label: 'Contato', href: '#' },
];
export default function LinkCurrent() {
return (
<nav aria-label="Seções do site">
<ul className="flex items-center gap-6 text-sm">
{links.map((link) => (
<li key={link.label}>
<Link href={link.href} aria-current={link.current ? 'page' : undefined}>
{link.label}
</Link>
</li>
))}
</ul>
</nav>
);
}Desabilitado
'use client';
import { Link } from '@/components/ui/link';
export default function LinkDisabled() {
return (
<Link href="#" isDisabled>
Baixar nota fiscal (disponível após o pagamento)
</Link>
);
}Quando usar
- Use para navegação: ir para outra página, seção, arquivo ou site externo.
- Não use para ações (salvar, enviar, abrir diálogo) — use
Button. - Precisa de um link com cara de botão (ex.: "Agendar consulta")? Use
LinkButtondoButton. - Para trilhas hierárquicas use
Breadcrumbs; para menus de sistema,Sidebar.
API
Link
Aceita todas as props do Link do React Aria, mais:
Prop
Type