Announcement

Implementation
Announcement Props

Common Examples

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

function ExampleComponent() {
  return (
    <Announcement
      status="info"
      title="We have an announcement for you. Hopefully you find it informational."
    />
  );
}

Announcement Status

Use the status prop to update the colors and icon of the Announcement.

Demo

Action Buttons

Pass in a Button as the children of the Announcement to add an action. Multiple actions are allowed, but discouraged.

Demo

Closing Announcements

Add the onClose callback prop to the Announcement to include a close button.

Demo

<Announcement
  title="We have an announcement for you"
  status="info"
  onClose={(e) => console.log("Announcement closed")}
>
  <Button size="small">Learn More</Button>
</Announcement>

`Announcement` Props

title

string

required

onClose

(e: MouseEvent) => void

Providing this prop will render a close button on the announcement.

status

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

default:"info"

Anvil2 Web

Resources

Announcement – Code

Common Examples

Announcement Status

Action Buttons

Closing Announcements

`Announcement` Props

Anvil2 Web

Resources

​Common Examples

​Announcement Status

​Action Buttons

​Closing Announcements

​Announcement Props

Common Examples

Announcement Status

Action Buttons

Closing Announcements

`Announcement` Props