Alert – Code

Implementation
Alert Props

Common Examples

import { Alert } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Alert status="warning" title="Warning!">
      This is a warning message.
    </Alert>
  );
}

Alert statuses

Use the status prop to set the color and icon of the Alert.

Closable alerts

Make an alert closable by providing a value to the onClose prop.Unlike Dialog, Drawer, and Popover, Alert does not have an open prop. Show and hide the alert by conditionally rendering it. In onClose, update your state and stop rendering the Alert (for example {isOpen ? <Alert ... /> : null}).

Alerts with actions

It is common to use Anvil2 Buttons within alerts to create actions. These can easily be arranged using the Flex component.

AI Mark

Add an AI Mark inline after the alert title by passing aiMark. Use true for the sparkle only, or pass tooltip or popover configuration.

<Alert
  title="Warning!"
  status="warning"
  onClose={(e) => console.log("Alert closed")}
>
  This is a warning message.
</Alert>

`Alert` Props

string

required

boolean | AiMarkWithTooltipOrPopoverConfig

When set, displays the AI mark inline after the title. Use true for the sparkle only, or pass tooltip or popover configuration. See AI Mark.

(e: MouseEvent) => void

Shows a close button. When the user dismisses the alert, Alert calls this handler; update state in the handler and stop rendering the Alert to hide it. Alert does not have an open prop.

"info" | "success" | "warning" | "danger"

default:"info"

Anvil2 Web

Resources

Alert – Code

Common Examples

Alert statuses

Closable alerts

Alerts with actions

AI Mark

`Alert` Props

​Common Examples

​Alert statuses

​Closable alerts

​Alerts with actions

​AI Mark

​Alert Props

Common Examples

Alert statuses

Closable alerts

Alerts with actions

AI Mark

`Alert` Props