You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
patterns / null
Notification
Notification
Notifications are essential in digital products to alert, warn, or give positive feedback. They give awareness and confidence to the user as they interact throughout the product.
Announcement component can be used for high priority notification that is persistent across the entire application. Primary use cases are to notify things such as New Feature or System-Wide status such as "Server is down" or "Unable to connect to the Internet." Announcements should not stack and only appear one at a time.
<Announcement
status="critical"
title="Unable to connect to the Internet"
actionName="Retry"
onActionClick={()=>{}}
/>
Dialog
Dialog is a component that can be used for notification. It can be used for high priority notification that interrupts user until an action is taken. A primary use case is Confirmation of Deletion on critical information.
<Dialog
open
title="Delete email"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Delete"
onSecondaryActionClick={()=>{}}
secondaryActionName="Cancel"
negative
>
Are you sure you want to delete this email and it scheduling interval?
</Dialog>
Toast
Toast component can be used as any priority notifications. The notification is not bound to the current page content, and it can notify users about another part of the app. By default, it can stack up to 5 and also queues after 5 showing visually. A primary use case is a notification to show the progress bar.
Banner component is used for contextual(inline) notification for items such as a page or a section on a page. It can be used for medium to low priority notification and ideally placed above the related content. A primary use case is to show error messages for a form group.
<Card>
<Card.Section>
<Stackdirection="column"spacing={2}>
<Bannerstatus="critical"title="First name is missing"/>