Skip to content

Attachment row

The file name is the link, so you can still select and copy it.

Use it when

  • A file needs its name, size and state on one 28px line: an upload, a source, evidence on a record.
  • People copy file names. The name stays selectable text, and only the name is the link.

Don’t use it when

  • A click anywhere in the row should open something. Use Data table with onRowClick.
  • You need the place to drop or pick files. Use Empty state with a Button, as the UploadTarget story does.

The rule it follows

  • Every number opens down to the entry behind it.

    Check: Click any figure. It opens the entries it was built from.

All 3 principles

Before and after

trial_balance_monthly.csv552 KBrunning
budget_forecast_monthly.csv1.3 MBqueued
forecast_memo_fy2026_6+6.md4 KBqueued
trial_balance_monthly.csv552 KBpassed
budget_forecast_monthly.csv1.3 MBpassed
forecast_memo_fy2026_6+6.md4 KBpassed
Each file shows its own state. Its name stays text you can select and copy.

Install

pnpm dlx shadcn@latest add https://tabularui.com/r/attachment-row.json https://tabularui.com/r/icon-button.json

Usage

import { DownloadSimpleIcon } from '@phosphor-icons/react';import { IconButton } from '@/components/tabular-ui/components/foundational/IconButton';import { AttachmentRow } from '@/components/tabular-ui/components/product/AttachmentRow'; <AttachmentRow  name="stg_sap__bkpf_20260930.csv"  size="9.4 MB"  timestamp="14:02"  status="passed"  href="/files/8842"  actions={<IconButton aria-label="Download" size="sm"><DownloadSimpleIcon /></IconButton>}/>

Set up your app firstAttachment row in Storybook