Attachment

A basic attachment composes AttachmentMedia for the file icon, AttachmentContent with AttachmentTitle and AttachmentDescription for metadata, and AttachmentActions for controls such as a remove button. AttachmentAction wraps Button, so icon-only actions should always carry an aria-label.

Use the State parameter to reflect the upload lifecycle. Idle renders a dashed border, Uploading and Processing apply a primary tint, Error uses destructive styling, and Done is the default resting state. The AttachmentTitle automatically shimmers while the state is Uploading or Processing — no extra classes needed. Pair the uploading state with a Spinner in the media slot.

Use the Size parameter to fit different densities. AttachmentSize.Default suits standalone upload lists, AttachmentSize.Sm works well inside chat composers, and AttachmentSize.Xs is compact enough for inline references within a message.

Set Orientation="AttachmentOrientation.Vertical" to stack the media above the content, which pairs naturally with AttachmentMediaVariant.Image for photo previews. Place an <img> inside the media slot and it is cropped to a square cover automatically. In vertical orientation, AttachmentActions repositions to the top-right corner of the card.

AttachmentGroup lays out attachments in a horizontally scrollable row with scroll snapping and edge-fade masking (the bb:scroll-fade-x utility) built in — nothing extra to configure. Give each attachment a minimum width such as min-w-64 so cards keep their shape while the row scrolls.

AttachmentTrigger renders an invisible overlay that makes the whole card clickable. It has no child content — place it as the first child and it stretches across the card (absolute inset-0). Because AttachmentActions sits on a higher layer than the trigger, action buttons remain independently clickable. Wire @onclick for button behavior, or set Href to render an anchor — the element switches automatically. Always provide an aria-label, since the trigger has no visible text.