Components

Attachment

File and image attachments

Import

import { Attachment, AttachmentContent, AttachmentTitle } from "@nyte-ai/ui/attachment";

Parts for attached files and images. Your app handles uploads, previews and removal.

Usage

Style with className and style, not xstyle.
AttachmentAction uses Nyte button styles unless render replaces it.

Anatomy

Part	Element	Parent
`AttachmentGroup`	`div`	Your container
`Attachment`	`div`	`AttachmentGroup`
`AttachmentMedia`	`div`	`Attachment`
`AttachmentContent`	`div`	`Attachment`
`AttachmentTitle`	`span`	`AttachmentContent`
`AttachmentDescription`	`span`	`AttachmentContent`
`AttachmentTrigger`	`button`, or `render`	`Attachment`
`AttachmentActions`	`div`	`Attachment`
`AttachmentAction`	Base UI button, or `render`	`AttachmentActions`

Examples

<Attachment state="done">
  <AttachmentContent>
    <AttachmentTitle>report.pdf</AttachmentTitle>
  </AttachmentContent>
</Attachment>

Props

Parts take native props and refs and set a matching data-slot.

Part	Prop	Type	Default
`Attachment`	`state`	`"idle" \| "uploading" \| "processing" \| "error" \| "done"`	`"done"`
`Attachment`	`size`	`"default" \| "sm" \| "xs" \| null`	`"default"`
`Attachment`	`orientation`	`"horizontal" \| "vertical" \| null`	`"horizontal"`
`AttachmentMedia`	`variant`	`"icon" \| "image" \| null`	`"icon"`
`AttachmentTrigger`	`render`	`ReactElement \| render callback`	`button`
`AttachmentTrigger`	`type`	Native button type	`"button"`, only without `render`
`AttachmentAction`	`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link" \| null`	`"ghost"`
`AttachmentAction`	`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	`"icon-xs"`

Attachment sets data-state, data-size and data-orientation. Media sets data-variant. null omits the matching class and attribute. A null action variant means "ghost".

Only AttachmentAction accepts state callbacks for className and style.

A button component that can be used to trigger actions. Renders a <button> element.

Button Props:

Prop	Type	Default	Description
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	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>`).
className	`string \| ((state: Button.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Button.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Button.State) => ReactElement)`	-	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.

Button Data Attributes:

Attribute	Type	Description
data-disabled	-	Present when the button is disabled.

Accessibility

Name the preview and icon-only action buttons, and give images alt text. Upload and error states are not announced.