Submission

Show delivery status and offer draft recovery.

Message wasn’t sent.Restore draft

View code

import { useState } from "react";
import { Submission } from "@stack/ui/submission";

export default function Example() {
  const [restored, setRestored] = useState(false);
  return (
    <div className="grid gap-3">
      <Submission.Root status="failed">
        <Submission.Status />
        <Submission.Recover onClick={() => setRestored(true)} />
      </Submission.Root>
      {restored && <p role="status">Draft restored in this example.</p>}
    </div>
  );
}

Usage

import { useState } from "react";
import { Submission } from "@stack/ui/submission";

Restore the original draft in your recovery handler. For unconfirmed delivery, reconcile with the server before resending.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

Submission.Root

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
status	SubmissionStatus	Yes	Current operation status.

Submission.Status

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.

Submission.Recover

Also accepts native element props.

Prop	Type	Required	Description
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
children	ReactNode	No	Content rendered inside the component. Default: "Restore draft".
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.