Attachment · ui.voila.dev

sales-dashboard.pdfUploading · 64%

message-renderer.tsxTypeScript · 12 KB

annual-report.pdfUpload failed

<Attachment.Root state="uploading">
	<Attachment.Media><Spinner /></Attachment.Media>
	<Attachment.Content>
		<Attachment.Title>sales-dashboard.pdf</Attachment.Title>
		<Attachment.Description>Uploading · 64%</Attachment.Description>
	</Attachment.Content>
	<Attachment.Actions>
		<Attachment.Action aria-label="Cancel upload"><XIcon /></Attachment.Action>
	</Attachment.Actions>
</Attachment.Root>

state drives the visual lifecycle — idle (dashed, before a file is chosen), uploading / processing (pulsing title), error, done. orientation="vertical" with Attachment.Media variant="image" makes a thumbnail card; Attachment.Group lays several out in a snap-scrolling row. Attachment.Trigger is a full-card overlay that opens a preview or link while the actions stay clickable above it.

API

Attachment.Root

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`size`	`"default" \| "sm" \| "xs"`	`"default"`
`state`	`"done"` \| `"error"` \| `"idle"` \| `"processing"` \| `"uploading"`	`"done"`	The upload lifecycle stage the attachment renders.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: attachment/components/attachment-root.tsx.

Attachment.Action

Prop	Type	Default
`loading`	`boolean`	—	Show a leading spinner and mark the button `aria-busy`, disabling interaction while an async action is in flight (e.g. a form submit).
`shape`	`"default" \| "pill"`	—	`pill` forces a fully rounded button; `default` follows the theme's `--radius`, so it changes with the brand.
`size`	`"default"` \| `"icon"` \| `"icon-lg"` \| `"icon-sm"` \| `"icon-xs"` \| `"lg"` \| `"sm"` \| `"xs"`	`"icon-xs"`	Height and horizontal padding. The `icon-*` set is square, for a button whose entire content is one icon — give those an `aria-label`.
`variant`	`"brand"` \| `"default"` \| `"destructive"` \| `"ghost"` \| `"highlight"` \| `"link"` \| `"outline"` \| `"primary"` \| `"secondary"`	`"ghost"`	Weight of the action. `default` is the one thing the page exists for, at most one per view; `secondary` an equal-weight alternative; `outline` for toolbars and anything that repeats in a row; `ghost` inside dense surfaces; `destructive` for what cannot be undone; `link` for an action that reads as navigation.
`className`	`string` \| `((state: ButtonState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`focusableWhenDisabled`	`boolean`	—	Whether the button should be focusable when disabled.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`ComponentRenderFn<HTMLProps, ButtonState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: ButtonState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: attachment/components/attachment-action.tsx.

Attachment.Actions

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: attachment/components/attachment-actions.tsx.

Attachment.Content

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: attachment/components/attachment-content.tsx.

Attachment.Description

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <span> prop. Source: attachment/components/attachment-description.tsx.

Attachment.Group

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: attachment/components/attachment-group.tsx.

Attachment.Media

Prop	Type	Default
`variant`	`"icon" \| "image"`	`"icon"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: attachment/components/attachment-media.tsx.

Attachment.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <span> prop. Source: attachment/components/attachment-title.tsx.

Attachment.Trigger

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <button> prop. Source: attachment/components/attachment-trigger.tsx.