> ## 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 Messages

> Confirmation messages are crucial touchpoints that verify user actions and provide an opportunity to ensure the user's intention before proceeding.

They should be clear, concise, and respectful of the user's workflow, minimizing disruption while maximizing clarity.

### Guiding principles for confirmation messages

**Be selective with confirmation prompts**

* **Purpose:** Use confirmation messages only when the action is significant, irreversible, or could lead to data loss. Avoid overusing them, as this can interrupt the user experience and lead to "confirmation fatigue," where users dismiss messages without fully engaging.
* **Efficiency:** Prioritize the user's time by only presenting confirmations when absolutely necessary. This shows respect for their workflow and confidence in their decisions.
* **Example:**
  * **Do:** Use a confirmation prompt when a user is about to delete an account or data that cannot be recovered.
  * **Don’t:** Prompt for confirmation when saving settings that can easily be changed back.

**Ensure clarity and simplicity**

* **Directness:** The confirmation message should directly state what the user is confirming, using a simple and straightforward verb+noun structure. Avoid unnecessary words or jargon.
* **Tone:** Use a tone that is confident and reassuring, aligned with ServiceTitan's brand voice. The language should be simple, bold, and authentic, resonating with the direct communication style of the trades professionals who use the product.

**Communicate consequences clearly**

* **Transparency:** Clearly explain what will happen as a result of the action, especially if it is irreversible. Users should understand the implications without needing to read lengthy explanations.
* **Brevity:** Keep the explanation short, focusing on the most critical information that the user needs to know to make an informed decision.

**Align CTA labels with action**

* **Consistency:** The primary CTA (Call to Action) should mirror the action described in the confirmation message. This ensures that even if a user only reads the title and the CTA, they will understand the action they are confirming.
* **Verb-noun structure:** Use a clear verb+noun structure for CTA labels to reinforce the action, e.g., "Delete Job" instead of just "Delete."

**Minimize Disruption**

* **User Flow:** Confirmation messages should be as non-intrusive as possible. Design them to fit seamlessly into the user journey, providing necessary checks without breaking the flow.
* **Visual Design:** Ensure that the confirmation message is visually aligned with the rest of the UI, using clear buttons and intuitive layouts that guide the user naturally.

**Examples**

#### Ensure clarity and simplicity

confirmationmessages-simple-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmationmessages-simple-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Delete this job?</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

confirmationmessages-simple-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmationmessages-simple-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Are you sure you want to delete this job?</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

#### Communicate consequences clearly

confirmationmessages-clear-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmationmessages-clear-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>This action cannot be undone.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

confirmationmessages-clear-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmationmessages-clear-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>
        Are you sure you want to proceed? If you delete this, it will be gone
        forever, and there’s no way to recover it.
      </Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

#### Align CTA labels with action

confirmationmessages-button-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmationmessages-button-do?file=src/App.tsx)

```tsx lines theme={null}
import { Dialog, Flex, Button } from "@servicetitan/anvil2";

function App() {
  return (
    <div style={{ minWidth: "23rem", minHeight: "12rem" }}>
      <Dialog enableScrollChaining open>
        <Dialog.Header>Delete this job?</Dialog.Header>
        <Dialog.Content>This action cannot be undone.</Dialog.Content>
        <Dialog.Footer>
          <Flex justifyContent="flex-end">
            <Flex gap="3">
              <Dialog.CancelButton>Cancel</Dialog.CancelButton>
              <Button appearance="danger">Delete Job</Button>
            </Flex>
          </Flex>
        </Dialog.Footer>
      </Dialog>
    </div>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

confirmationmessages-button-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/confirmationmessages-button-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Dialog, Flex, Button } from "@servicetitan/anvil2";

function App() {
  return (
    <div style={{ minWidth: "23rem", minHeight: "14rem" }}>
      <Dialog enableScrollChaining open>
        <Dialog.Header>Delete this job?</Dialog.Header>
        <Dialog.Content>
          Are you sure? If you delete this, it can not be recovered. This is
          permanent.
        </Dialog.Content>
        <Dialog.Footer>
          <Flex justifyContent="flex-end">
            <Flex gap="3">
              <Dialog.CancelButton>Cancel</Dialog.CancelButton>
              <Button appearance="danger">Yes, I&apos;m sure</Button>
            </Flex>
          </Flex>
        </Dialog.Footer>
      </Dialog>
    </div>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

### Structure of a Confirmation Message

**Title: Action-oriented and direct**

* Use a clear verb+noun format (e.g., "Delete this job?").
* Keep it concise, typically one sentence in sentence case.
* Maintain a straightforward, confident tone.

**Context: Brief and relevant**

* Provide essential information in 1-2 sentences.
* Avoid repeating the title and focus on what the user needs to know.

**Consequence: Clear and unambiguous**

* State the impact of the action, especially if irreversible.
* Use simple, direct language (e.g., "This action cannot be undone.").

**Primary CTA: Reflect the action**

* Match the CTA label with the title (e.g., "Delete Job").
* Ensure the primary action is prominent, with a clear verb+noun structure.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.