Sheet with Action Buttons in Footer for React

Save Draft uses variant="outline" and Create Task the default variant, so the main action stands out. Both sit in SheetFooter.

Task Name, Assignee and Due Date. Due Date uses type="date", so the browser shows its own date picker. Assignee is a text input here; a Combobox of team members fits better in a real app.

Not in this demo: neither has a handler. Save the draft without closing, then create the task and close the sheet by controlling its open state: Pass open to Sheet; onOpenChange receives the next boolean.

SheetFooter takes the free space above it with mt-auto, so it sits at the bottom of the panel however short the form is.

The button labeled Create Task is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads New Task, with Create a new task and assign it to a team member as the description.