Import Attachment, AttachmentMediaKind, Attachments, getAttachmentMediaMeta, normalizeMediaType from @prepared911/ui/attachment.
Attachments
Prop
Type
Default
Notes
children
ReactNode
Attachments
aria-label
LocalizedMessage
Name of the list
className
string
ref
Ref<HTMLUListElement>
Attachment
Props are a union: read-only, or removable.
Prop
Type
Default
Notes
filename
string
required
Data; truncates
mediaType
string
Picks the glyph, kind and subtype label
url
string
An image type with a URL shows a thumbnail
description
LocalizedMessage | DisplayValue
the subtype of mediaType
Supporting line
onRemove
MouseEventHandler<HTMLButtonElement>
Makes the chip removable
removeLabel
LocalizedMessage
required with onRemove
Name and tooltip of the remove control
className
string
ref
Ref<HTMLLIElement>
data-* attributes pass to the list or the item. Reserved design-system state names are dropped with a warning.
Helpers
Export
Notes
getAttachmentMediaMeta(mediaType?)
{ glyph, kind, subtype? }
normalizeMediaType(mediaType)
Lowercased, parameters removed
AttachmentMediaKind
File, Image, Video, Audio, Pdf, Code
Exports
Attachments, Attachment, AttachmentMediaKind, getAttachmentMediaMeta, normalizeMediaType, and the types AttachmentsProps, AttachmentProps and AttachmentMediaMeta.
Props
Name
Type
Default
Description
filename
string
—
File name, shown as the title. It is data, and it truncates with an ellipsis.
className
string
—
@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
description
LocalizedMessage | DisplayValue
—
Supporting text under the title, such as "PDF · 12 KB". With none, the short label of mediaType shows (PDF),
and with neither nothing shows.
mediaType
string
—
MIME type. It picks the glyph and the paint of the media tile, and, with no description, the short type label.
onRemove
MouseEventHandler<HTMLButtonElement>
—
Not set: the attachment has no remove control.
Called when the remove control is pressed.
ref
Ref<HTMLLIElement>
—
Ref to the list item.
removeLabel
LocalizedMessage
—
Not allowed without onRemove.
Accessible name and tooltip of the remove control, such as "Remove requirements.pdf".
url
string
—
Source URL. With an image/*mediaType it draws as a thumbnail in the media tile. Image accepts same-origin
paths, data:image/* URLs, and, here, remote http(s) URLs; it rejects blob: URLs in development.
Storybook
Interactive examples and edge cases for this component are in Storybook.