104Get started
HextaUI

Attachment: Sizes

size scales the padding, media and text together, and keeps the inner corners concentric with the card.

invoice.pdfdefault
invoice.pdfsm
invoice.pdfxs
import { IconFileText, IconX } from "@tabler/icons-react"

import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

const sizes = ["default", "sm", "xs"] as const

export function AttachmentSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {sizes.map((size) => (
        <Attachment key={size} size={size}>
          <AttachmentMedia>
            <IconFileText />
          </AttachmentMedia>
          <AttachmentContent>
            <AttachmentTitle>invoice.pdf</AttachmentTitle>
            <AttachmentDescription>{size}</AttachmentDescription>
          </AttachmentContent>
          <AttachmentActions>
            <AttachmentAction aria-label="Remove invoice.pdf">
              <IconX />
            </AttachmentAction>
          </AttachmentActions>
        </Attachment>
      ))}
    </div>
  )
}

Add this example

This adds the example as components/examples/attachment/sizes.tsx, together with the Attachment component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/attachment-sizes.json

To add only the component, follow the Attachment installation.

Props in this example

The Attachment props this example sets, from the API reference.

Attachment

PropTypeDefault
size
"default" | "sm" | "xs""default"

Every prop is in the Attachment API reference.

More Attachment examples

See them all, with keyboard support and accessibility notes, on the Attachment page.

Related components