# TextLink

> El link suelto de iCloud: semibold en el acento, con «›» para ir a otra pantalla o «↗» para salir del sitio.

```tsx
import { TextLink } from "sebs7n-ui/text-link"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Adentro y afuera

`chevron` lleva a otra pantalla de la app; `external` sale del sitio y abre otra pestaña.

```tsx
import { TextLink } from "sebs7n-ui/text-link"

function Adornos() {
  return (
    <div className="flex flex-col items-start gap-3 text-body">
      <TextLink href="/docs/instalacion" trailing="chevron">
        Ver la instalación
      </TextLink>
      <TextLink href="https://github.com/sebafermanelli/sebs7n-ui" trailing="external">
        github.com
      </TextLink>
      <TextLink href="/docs/theming">Theming</TextLink>
    </div>
  )
}
```

### Debajo de una sección

Como en los ajustes de iCloud: título, una línea que explica y el link que lleva a hacerlo.

```tsx
import { TextLink } from "sebs7n-ui/text-link"

function EnUnaSeccion() {
  return (
    <div className="flex max-w-sm flex-col gap-1">
      <h3 className="text-title-3 text-label">Facturación</h3>
      <p className="text-body text-label-secondary">Cambiá el plan, el medio de pago o descargá las facturas del año.</p>
      <TextLink className="text-body" href="#" trailing="chevron">
        Administrar la facturación
      </TextLink>
    </div>
  )
}
```

## Props

### TextLink

Hereda las props de `<a>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `externalLabel` | `string` | `"(se abre en otra pestaña)"` | El aviso para el lector de pantalla de `external`. Por defecto «(se abre en otra pestaña)». |
| `render` | `RenderElement` | — | El elemento que se renderiza en lugar del `<a>`: `render={<Link href="/planes" />}`. |
| `trailing` | `"chevron" \| "external"` | — | `chevron` (›) para navegar adentro · `external` (↗) para salir del sitio, en otra pestaña. |
| `variant` | `"accent" \| "inline" \| "subtle" \| "row"` | `"accent"` | `accent` (el default: semibold en el acento) · `inline` · `subtle` · `row`, los de `linkVariants`. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

## Teclado

| Tecla | Qué hace |
|---|---|
| Enter | Sigue el link. |
| Tab | Entra y sale. |

## Accesibilidad

- Es un `<a>` real, sin `"use client"`: sirve en un Server Component y se puede abrir en otra pestaña.
- El adorno es decorativo (`aria-hidden`). Con `trailing="external"` el link suma un texto `sr-only` —«(se abre en otra pestaña)», o el de `externalLabel`— que forma parte de su nombre: quien no ve la flecha se entera igual.
- El acento va en `brand-900`, que llega a 4,5:1 sobre la página con todas las marcas. Por eso el link **no pinta fondo** en hover: sobre un relleno no llegaría.

## Reglas de uso

- **`chevron` adentro, `external` afuera.** «Ver planes ›» lleva a otra pantalla de la app; «account.apple.com ↗» sale del sitio y abre otra pestaña (`target="_blank"` y `rel="noopener noreferrer"` por defecto; los tuyos ganan).
- El adorno va pegado a la última palabra con un espacio duro: la flecha nunca queda sola en el renglón de abajo.
- Con `next/link`: `render={<Link href="/planes" />}`. No se llama `Link` para no chocar con ese.
- Adentro de un párrafo, `variant="inline"` (subrayado siempre). El acento es para el link suelto debajo de una sección.

## Relacionados

[button](/docs/components/button.md) · [breadcrumb](/docs/components/breadcrumb.md)