Attachment Card
File attachment tiles and chips with type-toned folded-page glyphs, middle-ellipsis names, sizes, upload progress, error and retry, drawn image previews and a remove button on hover or focus.
Preview
Compact, in a message composer
design-review-notes.mdDocument · 12 KB
hero-illustration.svgImage · 47 KB
api-client.tsUploading · 65%
customer-export.csvToo large
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name / size | string / number | — | File name (middle-truncated) and size in bytes. |
| kind | "pdf" | "doc" | "sheet" | "image" | "zip" | "audio" | "code" | "file" | from extension | Picks the glyph tone and label. |
| progress | number | — | Upload progress 0–100; shows the overlay until 100. |
| error / onRetry | string / () => void | — | Failed upload message and its Retry action. |
| onRemove / onOpen | () => void | — | Remove button on hover or focus; open makes the card a button. |
| preview | ReactNode | — | Drawn preview for the tile: the picture for images, a page, sheet or waveform for other kinds (the kind glyph then sits in the corner). |
| variant | "tile" | "chip" | "tile" | Grid tile or compact chip. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.