Attachment

Attached files: rows, thumbnail cards and upload progress.

Import

tsx

import { Attachment } from "@indoku/ui"

Examples

Basic usage

invoice-september.pdf

470.7 KB

rekap-penjualan.xlsx

workspace.png

PNG · 820.3 KB

desk-reference.jpg

JPG · 820.3 KB

office-reference.jpg

JPG · 820.3 KB

sales-dashboard.pdf

Uploading · 64%

rekap-penjualan.xlsx

tsx

function AttachmentDemo() {  return (    <Stack gap="3" maxW="sm">      <Attachment.Root>        <Attachment.Media />        <Attachment.Content>          <Attachment.Name>invoice-september.pdf</Attachment.Name>          <Attachment.Meta size={482000} />        </Attachment.Content>      </Attachment.Root>      <Attachment.Root>        <Attachment.Media />        <Attachment.Content>          <Attachment.Name>rekap-penjualan.xlsx</Attachment.Name>          <Attachment.Status status="uploading" progress={64} />        </Attachment.Content>        <Attachment.Actions>          <Attachment.Action aria-label="Batalkan">✕</Attachment.Action>        </Attachment.Actions>      </Attachment.Root>    </Stack>  )}function AttachmentCardsDemo() {  return (    <Stack gap="2">      <Attachment.Group>        {["workspace.png", "desk-reference.jpg", "office-reference.jpg"].map((n) => (          <Attachment.Root key={n} orientation="vertical">            <Attachment.Media src={`https://picsum.photos/seed/${n}/320/240`} />            <Attachment.Content>              <Attachment.Name>{n}</Attachment.Name>              <Attachment.Meta format={n.split(".")[1].toUpperCase()} size={840000} />            </Attachment.Content>          </Attachment.Root>        ))}      </Attachment.Group>      <Attachment.Root>        <Attachment.Media loading />        <Attachment.Content>          <Attachment.Name>sales-dashboard.pdf</Attachment.Name>          <Attachment.Status status="uploading" progress={64} variant="text" />        </Attachment.Content>        <Attachment.Actions>          <Attachment.Remove />        </Attachment.Actions>      </Attachment.Root>      <Attachment.Root>        <Attachment.Media />        <Attachment.Content>          <Attachment.Name>rekap-penjualan.xlsx</Attachment.Name>          <Attachment.Status status="uploading" progress={65} />        </Attachment.Content>        <Attachment.Actions>          <Attachment.Remove />        </Attachment.Actions>      </Attachment.Root>    </Stack>  )}

Props

Root

Prop	Type	Default	Description
`onClick`	`() => void`	–	Click handler for the whole card (not the action buttons). Usually opens a preview.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	`"vertical"` renders a square card (thumbnail on top, name below). Pairs well with `Attachment.Group`.

Media

Prop	Type	Default	Description
`src`	`string`	–	Thumbnail image URL. Without it, an icon based on `kind` is shown.
`alt`	`string`	–
`kind`	`"file" \| "code"`	`file`	Built-in icon: `"file"` or `"code"` (`</>`). Ignored when `src` is set.
`loading`	`boolean`	–	Show a spinner (upload in progress).

Prop	Type	Default	Description
`size`	`number`	–	File size in bytes. Formatted automatically (e.g. 1200000 → "1.1 MB").
`format`	`string`	–	Format label shown before the size, e.g. `"PNG"` → "PNG · 820 KB".

Status

Prop	Type	Default	Description
`status*`	`AttachmentStatus`	–
`progress`	`number`	–	0–100. Used when `status` is `"uploading"`.
`variant`	`"bar" \| "text"`	`bar`	`"bar"` renders a progress bar. `"text"` renders "Uploading · 64%" (pair with `<Attachment.Media loading />`).

Action

Prop	Type	Default	Description
`"aria-label"*`	`string`	–	Defines a string value that labels the current element.
`children`	`ReactNode`	–

* required. Style props and HTML attributes are accepted as well.

← Bubble Marker →

Created by @indokudev