> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Confirmation - Web
A crucial safety net for users. Confirmation messages let users double-check actions (especially irreversible ones) and set expectations for what happens next.
## Content Guidelines
For all confirmation messages, please refer to the [Confirmation Messages content pattern](https://anvil.servicetitan.com/docs/foundations/content/confirmation-messages.md) for content guidelines and tips for structuring messages.
## Unsaved Changes
An "unsaved changes" confirmation pattern is typically used when the user has made changes to data or content within the current workflow but attempts to navigate away without saving those changes. This pattern helps improve the user experience and prevents data loss or mistakes.
This pattern should not be used if no changes have been made by the user.
confirmation-unsaved
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-unsaved?file=src/App.tsx)
```tsx lines theme={null}
import { Dialog, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Confirm an action
### Destructive
Use this pattern for confirming a destructive action, such as delete, disconnect, remove, disable, etc.
#### Simple Destructive Confirmation
Use when content is simple and text-only.
confirmation-destructive-simple
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-destructive-simple?file=src/App.tsx)
```tsx lines theme={null}
import { Dialog, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
> [!TIP]
>
> **Do**
confirmation-destructive-complex-dont
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-destructive-complex-dont?file=src/App.tsx)
```tsx lines theme={null}
import { Popover, Flex, Button, Text, TextField } from "@servicetitan/anvil2";
function App() {
return (
Merge
Merge GL Accounts
This will merge 2 GL accounts into the following account:
Inventory.
Type ‘Merge’ to confirm action
);
}
export default App;
```
> [!CAUTION]
>
> **Don't**
* Do not use a Popover for complex confirmation patterns as it has potential usability issues
* Use a danger Button instead of colored text
##### Edge Case
confirmation-destructive-edgecase-do
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-destructive-edgecase-do?file=src/App.tsx)
```tsx lines theme={null}
import { Dialog, Flex, Button, Combobox } from "@servicetitan/anvil2";
import { useState } from "react";
type Item = {
id: number;
name: string;
};
const items: Item[] = [
{ id: 1, name: "First item" },
{ id: 2, name: "Second item" },
{ id: 3, name: "Third item" },
{ id: 4, name: "Fourth item" },
{ id: 5, name: "Fifth item" },
{ id: 6, name: "Sixth item" },
{ id: 7, name: "Seventh item" },
{ id: 8, name: "Eighth item" },
{ id: 9, name: "Ninth item" },
{ id: 10, name: "Tenth item" },
];
function App() {
const [selectedItems, setSelectedItems] = useState([]);
return (
);
}
export default App;
```
> [!TIP]
>
> **Do**
* When the action itself contains the word “Cancel”, use a verb-noun pairing like "Cancel Receipt" in the CTA so users would know what happens if that's the only thing they read. Primary CTA should mirror the question in the header.
* Use "Don't Cancel" as the secondary action when the main CTA is "Cancel"
### Non-Destructive
Use this pattern when confirming a non-destructive action, such as activate, enable, continue, etc.
#### Simple Non-Destructive Confirmation
Use when content is simple and text-only.
confirmation-nondestructive-simple
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-nondestructive-simple?file=src/App.tsx)
```tsx lines theme={null}
import { Dialog, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
> [!CAUTION]
>
> **Don't**
* Use primary (blue) button for non-destructive action
* Avoid using yes/no, primary CTA should mirror the question in the header.
* If button text is too long and space is limited, prioritize retaining the verb and noun while omitting adjectives
* For example, "Recalculate Estimate Tax" can be shortened to "Recalculate Tax."
#### Complex Non-Destructive Confirmation
Use this pattern when content contains UI elements beyond plain text (e.g., card, table, etc.).
confirmation-nondestructive-complex
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-nondestructive-complex?file=src/App.tsx)
```tsx lines theme={null}
import { Dialog, Flex, Button, Text } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
##### Dos/Don'ts
confirmation-nondestructive-complex-do
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-nondestructive-complex-do?file=src/App.tsx)
```tsx lines theme={null}
import { Dialog, Flex, Button, Alert, Link, Text } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
> [!CAUTION]
>
> **Don't**
* Use appropriate Dialog size according to content
* Alert should be displayed above content
## Congratulations/Success
A Congratulations/Success confirmation pattern is typically used when the user has successfully completed a task or workflow. The pattern helps improve the user experience by providing feedback to the user and can be an opportunity to delight the user.
#### Simple task
* Use when the user completed an easy, short, and common task (i.e., something that users do multiple times).
* The Toast appears after the task is completed and the page reloads.
* If the user navigated to a different page or Dialog to complete the task, the Toast appears after navigating the user to the page where they started the task.
#### Complex task/workflow with no next steps
* Use when the user completed a more complex task or workflow and there are no next steps to complete. Note: The only CTA that should be used in this template is “Done”.
* Complex tasks and workflows are generally 3 or more steps, time intensive, and something the user does only once.
* Dialog appears after navigating the user back to the page where they started the task or workflow.
##### Dos/Don'ts
> [!TIP]
>
> **Do**
> [!CAUTION]
>
> **Don't**
* Use sentence case for title.
* Include only one CTA – “Done”. Note: if you want to include other CTAs, use the next template.
* Don’t include CTAs that perform actions or navigate the user to other pages. The user should already have been navigated to the next logical page before this Dialog appears.
#### Complex task/workflow with related CTAs
Use this pattern for complex tasks or workflows (e.g., three or more steps, time-intensive, or one-time actions). These dialogs appear after navigating the user back to their starting page and offer next steps beyond "Done".
> [!TIP]
>
> **Do**
* Use a single column layout within a full-screen Dialog
* Include clear titles, explanations, and CTAs for each next step. Use a verb + noun pair as the button text for CTAs, like “Book Call” or “View Progress”.
* Don’t use a CTA that navigates the user back to where they started as this adds an unnecessary click. Automatically navigate the user there when they complete the flow and use the previous template as a success message instead.
#### Success as part of page content
* Use when the success message needs to be persistent and becomes a part of the page content.
* Alert appears immediately after the task or workflow is completed.
confirmation-success
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-success?file=src/App.tsx)
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return (
[Details such as date and time, next steps, etc.]
);
}
export default App;
```
##### Dos/Don'ts
confirmation-success-do
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmation-success-do?file=src/App.tsx)
```tsx lines theme={null}
import { EditCard, Flex, Text, Alert } from "@servicetitan/anvil2";
function App() {
return (
Automatically create driving and working entries when dispatch and
arrive are pressed.
Customer was successfully migrated on 10/12/2025, 09:30 PST
);
}
export default App;
```
> [!TIP]
>
> **Do**
* Include the Alert inline in the layout.
* Use when the success state and/or data around the completion of the flow needs to be documented for future views of the page. Include dates and times in the copy when applicable.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.