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.

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

title

string

required

aiMark

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.

onClose

(e: MouseEvent) => void

The component is closeable if this prop is provided.

status

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

default:"info"

Anvil2 Web

Resources

Alert – Code

Common Examples

Alert statuses

Closable alerts

Alerts with actions

AI Mark

`Alert` Props

Anvil2 Web

Resources

​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