Attachment

An attachment presents a file with an icon or a thumbnail, a title and a description, and it can carry actions such as removing the file. Its state follows the upload, so users see whether a file is waiting, in progress, failed or complete.

UsageCopy Anchor Link

import {
	Attachment,
	AttachmentAction,
	AttachmentActions,
	AttachmentContent,
	AttachmentDescription,
	AttachmentMedia,
	AttachmentTitle,
} from "@biem/ui/components/ui/attachment";
import { IconFileText, IconX } from "@tabler/icons-react";

export function AttachmentDefault() {
	return (
		<Attachment>
			<AttachmentMedia>
				<IconFileText stroke={1.5}/>
			</AttachmentMedia>
			<AttachmentContent>
				<AttachmentTitle>Delivery note 4812.pdf</AttachmentTitle>
				<AttachmentDescription>PDF · 248 KB</AttachmentDescription>
			</AttachmentContent>
			<AttachmentActions>
				<AttachmentAction aria-label="Remove delivery note">
					<IconX stroke={1.5}/>
				</AttachmentAction>
			</AttachmentActions>
		</Attachment>
	);
}

ExamplesCopy Anchor Link

HorizontalCopy Anchor Link

Invoices and price lists are usually recognized by their name. With orientation set to "horizontal", which is also the default, the media sits beside the name and the details of the file, so users identify the file at a glance by its name.

VerticalCopy Anchor Link

Photos and scans say more through their content than through their name. Set to "vertical", orientation places the media above the name and gives it the full width of the attachment, so users recognize a picture before they read anything.

Extra SmallCopy Anchor Link

Space is scarce where files travel along with a message, for example in the input of a conversation. At size "xs", an attachment claims the least room, so the text that users write stays in the foreground.

SmallCopy Anchor Link

Side panels and comment threads show files beside content that matters more. An attachment with size set to "sm" keeps the file recognizable in less space, so it does not outweigh that content.

Default SizeCopy Anchor Link

In forms and upload areas, users check each file before they submit it. Unless a size is set, an attachment takes the size "default", so files keep one scale across every product.

Icon MediaCopy Anchor Link

Spreadsheets and text documents rarely offer a picture that tells them apart. For such files, the media holds an icon with variant set to "icon", its default, and users identify the file by its name and details.

Image MediaCopy Anchor Link

Pictures from the shop floor carry information that no file name can, such as the condition of a delivery. With variant set to "image", the picture fills the media and stays muted while the file is still uploading or being processed or after it has failed, so users tell a ready photo from one that is not.

PreviewCode

Shelf photo aisle 4.jpgJPG · 1.2 MB

With TriggerCopy Anchor Link

Users often check a file before they send it or work with it. Placed inside the attachment, AttachmentTrigger turns its whole surface into one target for the pointer and the keyboard, for example to open a preview. The actions keep responding on their own, so removing a file never opens it by mistake.

Trigger as LinkCopy Anchor Link

Some files already have an address of their own, such as a document in the archive. Through render, the trigger becomes a real link to that address, so users can open the file in a new tab or pass the link on.

GroupCopy Anchor Link

A message or a form often carries several files at once. Inside AttachmentGroup they share one row that users scroll sideways once it runs out of width, and scrolling comes to rest at the start of a file rather than in the middle of one.

UploadingCopy Anchor Link

While a file is on its way, users should not mistake it for a complete one. With state set to "uploading", the attachment signals ongoing work, and users see at once which files are still in transfer.

ProcessingCopy Anchor Link

Once a file has arrived, the system often has to read or check it before users can work with it. Set to "processing", state keeps the activity visible through that step, so the file stays marked as not ready although its transfer has finished.

ErrorCopy Anchor Link

An upload can fail, for example when the connection drops. Marked with state set to "error", the attachment shows the failure on the file itself, so users find it among the others and decide what to do with it.

DoneCopy Anchor Link

Finished files are ready for whatever users do next, such as sending them with a message. Nothing about the attachment signals work in progress once state is set to "done". This value is also the default, so an attachment without a state of its own counts as finished.

Disabled ActionCopy Anchor Link

Removing a file is sometimes not possible, for example while the form that carries it is being submitted. An action marked as disabled accepts no interaction and exposes its state to assistive technology, while the pointer shows users that the action is unavailable for now.

API ReferenceCopy Anchor Link

AttachmentCopy Anchor Link

AttachmentMediaCopy Anchor Link

AttachmentContentCopy Anchor Link

AttachmentContent has no props of its own. It accepts the props of a native div.

AttachmentTitleCopy Anchor Link

AttachmentTitle has no props of its own. It accepts the props of a native span.

AttachmentDescriptionCopy Anchor Link

AttachmentDescription has no props of its own. It accepts the props of a native span.

AttachmentActionsCopy Anchor Link

AttachmentActions has no props of its own. It accepts the props of a native div.

AttachmentActionCopy Anchor Link

AttachmentTriggerCopy Anchor Link

AttachmentGroupCopy Anchor Link

AttachmentGroup has no props of its own. It accepts the props of a native div.