Attachment
Displays a file, image, or media attachment with support for states, sizes, and orientation.
"use client"
import {
Attachment,
AttachmentMedia,
AttachmentContent,Usage
import { Attachment, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription } from "uilab-core"<Attachment>
<AttachmentMedia>
<FileTextIcon />
</AttachmentMedia>
<AttachmentContent>
<AttachmentTitle>report.pdf</AttachmentTitle>
<AttachmentDescription>2.4 MB</AttachmentDescription>
</AttachmentContent>
</Attachment>Examples
States
Use the state prop to show idle, uploading, processing, error, or done states.
"use client"
import {
CheckIcon,
ClockIcon,
FileTextIcon,Sizes
Use the size prop to change the size.
"use client"
import {
Attachment,
AttachmentMedia,
AttachmentContent,Vertical
Use orientation="vertical" inside AttachmentGroup for a gallery-style layout.
"use client"
import {
Attachment,
AttachmentGroup,
AttachmentMedia,Actions
Use AttachmentActions and AttachmentAction to add remove or download buttons.
"use client"
import {
Attachment,
AttachmentMedia,
AttachmentContent,Trigger
Add an AttachmentTrigger to make the whole card open a dialog or link — actions stay independently clickable.
"use client"
import {
Attachment,
AttachmentMedia,
AttachmentContent,Image
Set variant="image" on AttachmentMedia and render an <img> inside it.
"use client"
import { Attachment, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription } from "uilab-core"
export function AttachmentImageExample() {
return (Group
Wrap attachments in AttachmentGroup to lay them out in a horizontally scrollable, snapping row.
"use client"
import {
Attachment,
AttachmentGroup,
AttachmentMedia,