sebs7n-ui

FundamentosServer Component

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

Ejemplos

Adentro y afuera

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

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.

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

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

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

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 Breadcrumb