Primitivedata-display

Attachment

Stable

Um arquivo mostrado como card, no estado em que o envio está. O estado vive na raiz e todas as partes o leem de lá.

Instalação

npx up-web-ds add attachment

Preview

Default

Relatório trimestral.pdfPDF · 240 KB

States

Aguardando envioSelecionado, ainda não enviado
Contrato.pdfEnviando · 40%
Contrato.pdfProcessando
Contrato.pdfFalhou: arquivo acima de 10 MB
Contrato.pdfPDF · 1,2 MB

Sizes

Captura de tela.pngTamanho xs
Captura de tela.pngTamanho sm
Captura de tela.pngTamanho default

With Media

Fachada.pngPNG · 820 KB

With Actions

Anexo.docxDOCX · 96 KB

Clickable

Planta baixa.dwgAbrir no visualizador

Group

Contrato.pdfEnviado
Planta.dwgEnviado
Fachada.pngEnviado
Memorial.docxEnviado

Vertical

Fachada.pngPNG
Corte.pngPNG

All states

Default

Relatório trimestral.pdfPDF · 240 KB

States

Aguardando envioSelecionado, ainda não enviado
Contrato.pdfEnviando · 40%
Contrato.pdfProcessando
Contrato.pdfFalhou: arquivo acima de 10 MB
Contrato.pdfPDF · 1,2 MB

Sizes

Captura de tela.pngTamanho xs
Captura de tela.pngTamanho sm
Captura de tela.pngTamanho default

With Media

Fachada.pngPNG · 820 KB

With Actions

Anexo.docxDOCX · 96 KB

Clickable

Planta baixa.dwgAbrir no visualizador

Group

Contrato.pdfEnviado
Planta.dwgEnviado
Fachada.pngEnviado
Memorial.docxEnviado

Vertical

Fachada.pngPNG
Corte.pngPNG

Usage

@/components/ui/attachment
import {
  Attachment,
  AttachmentContent,
  AttachmentDescription,
  AttachmentTitle,
} from '@/components/ui/attachment'
Attachment
<Attachment>
  <AttachmentContent>
    <AttachmentTitle>Relatório trimestral.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 240 KB</AttachmentDescription>
  </AttachmentContent>
</Attachment>

Props

Attachment

Props de Attachment
PropTypeDefaultDescription
orientation"horizontal" | "vertical" | null'horizontal'
size"default" | "sm" | "xs" | null'default'
state"done" | "idle" | "uploading" | "processing" | "error"'done'

Estende React.ComponentProps<'div'> & VariantProps<typeof attachmentVariants>. Aceita também os atributos padrão de um elemento React (280 não listados).

AttachmentMedia

Props de AttachmentMedia
PropTypeDefaultDescription
variant"image" | "icon" | null'icon'

Estende React.ComponentProps<'div'> & VariantProps<typeof attachmentMediaVariants>. Aceita também os atributos padrão de um elemento React (280 não listados).

AttachmentContent

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

AttachmentTitle

Estende React.ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

AttachmentDescription

Estende React.ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

AttachmentActions

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

AttachmentAction

Props de AttachmentAction
PropTypeDefaultDescription
size"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null'icon-xs'
variant"link" | "destructive" | "primary" | "outline" | "secondary" | "ghost" | nullsem valor padrão
classNamestring | ((state: ButtonState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabledbooleanfalseWhether the button should be focusable when disabled.
nativeButtonbooleantrueWhether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
styleReact.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof Button>. Aceita também os atributos padrão de um elemento React (285 não listados).

AttachmentTrigger

Props de AttachmentTrigger
PropTypeDefaultDescription
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Estende useRender.ComponentProps<'button'>. Aceita também os atributos padrão de um elemento React (290 não listados).

AttachmentGroup

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: a ação só de ícone carrega aria-label, porque sem ele o controle anuncia "botão" e não diz o que remove; o card clicável é um button de verdade, alcançável por Tab e ativável por Enter, com type=button por padrão para nunca submeter um formulário em volta. O estado nunca é comunicado só pela cor — o card de erro tinge a superfície e a descrição diz o motivo, verificado em navegador. O anel de foco é desenhado no card por focus-within, não no gatilho: ele é uma sobreposição invisível sobre o card inteiro, e um anel em volta dele contornaria uma caixa sem nada legível. Touch verificado em viewport de 375px com emulação de toque: as ações ficam acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, e o grupo rola dentro de si em vez de empurrar a página. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o brilho do título ocupado é ambiente, diz "ainda trabalhando" a quem olha e nada a mais ninguém, então fica atrás de motion-safe: e simplesmente não roda; o título permanece legível, que é a parte que carrega significado. Três utilitários da origem (shimmer, scroll-fade-x, scrollbar-none) não existiam aqui e não estilizavam nada: foram mapeados para animate-text-shimmer, scroll-shadow e scrollbar-quiet.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
shadcn registry / attachment
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/attachment.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Button
Usado por
Nenhum ainda