BrutalLab UI
es
EnglishEspañol
PatternDisponible

Attachment

Fila de archivo con metadatos y acciones explícitas.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/attachment.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx
'use client';

import Link from 'next/link';

import {
  Attachment,
  AttachmentMedia,
  AttachmentContent,
  AttachmentTitle,
  AttachmentDescription,
  AttachmentActions,
} from '@/components/ui/attachment';
import { Button } from '@/components/ui/button';
import { FileTextIcon as FileText } from "@phosphor-icons/react";

export default function Demo() {
  return (
    <Attachment className="w-full max-w-md">
      <AttachmentMedia>
        <FileText weight="bold" aria-hidden="true" />
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>Component guide</AttachmentTitle>
        <AttachmentDescription>Documentation · Markdown</AttachmentDescription>
      </AttachmentContent>
      <AttachmentActions>
        <Button
          variant="outline"
          size="sm"
          nativeButton={false}
          render={<Link href="/en/docs/components/card" />}
        >
          Open
        </Button>
      </AttachmentActions>
    </Attachment>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

  • Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
  • Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

PropTipoDefaultDescripción
classNamestring?Extends the root visual styles without changing its semantics.
childrenReactNode?Compose the exported subcomponents as shown in the runnable example.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.