Multi-Intent Form Buttons

ProNew

One form with several submit buttons (Save draft, Publish, Delete) that send an intent with the values, validate differently per intent, and show which button is working. Use this when the same fields lead to different actions with different rules.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A form can be saved as a draft with almost no rules, or published with strict ones, and both buttons live next to each other.

Do not use it when: When the two actions are unrelated, use two forms. A destructive intent should still ask for confirmation.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onIntent`	`(intent, values) => Promise<void>`	`intent` is `"draft"` or `"publish"`. Reject to show a failure message.

Accessibility

Each button is a normal submit button with name="intent" and a value, so the browser (and a server action) knows which one was pressed; Enter in a field triggers the first submit button, the safest one (Save draft).
While one intent runs, both buttons are disabled and the busy one says what it is doing.
Field errors are linked alerts; the result ("Draft saved.", "Published.") is a polite status.

Testing

The pattern ships with a Testing Library test (multi-intent-form-buttons.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A form can be saved as a draft with almost no rules, or published with strict ones, and both buttons live next to each other.

Do not use it when: When the two actions are unrelated, use two forms. A destructive intent should still ask for confirmation.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onIntent`	`(intent, values) => Promise<void>`	`intent` is `"draft"` or `"publish"`. Reject to show a failure message.

Accessibility

Each button is a normal submit button with name="intent" and a value, so the browser (and a server action) knows which one was pressed; Enter in a field triggers the first submit button, the safest one (Save draft).
While one intent runs, both buttons are disabled and the busy one says what it is doing.
Field errors are linked alerts; the result ("Draft saved.", "Published.") is a polite status.

Testing

The pattern ships with a Testing Library test (multi-intent-form-buttons.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.