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.

Demo

Closable alerts

Make an alert closable by providing a value to the onClose prop.

Demo

Alerts with actions

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

Demo

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

`Alert` Props

title

string

required

onClose

(e: MouseEvent) => void

The component is closeable if this prop is provided.

status

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

default:"info"

Anvil2 Web

Resources

Common Examples

Alert statuses

Closable alerts

Alerts with actions

`Alert` Props

Anvil2 Web

Resources

​Common Examples

​Alert statuses

​Closable alerts

​Alerts with actions

​Alert Props

Common Examples

Alert statuses

Closable alerts

Alerts with actions

`Alert` Props