Design for toast component

Problem to Solve

As a user, I need to display a timely message to the user. This message will likely show up on top of the page.
Other characteristics of the component:

1. It may auto-dismiss after a certain time
2. The end user can dismiss it
3. It may have a call to action

Similar component from other design systems are:

Material
https://material.angular.io/components/snack-bar/overview

From Carbon (IBM)
https://carbon-components-svelte.onrender.com/components/ToastNotification
https://next.carbondesignsystem.com/libraries/carbon-react/latest/assets/notification#dashboard
Stacked Notifications - https://carbon-for-ibm-products.netlify.app/?path=/docs/security-components-stackednotification--default

Shoelace
https://shoelace.style/components/alert?id=toast-notifications

Open Questions

Questions for Interaction Design:
Is there a need to display this in different locations? (Top, Bottom, Upper-right, etc.)?
Are there any content differences between this component and a banner? Or is it similar types of content displayed in a different way?

## Design Deliverables
- [ ] Interaction Design information
- [x] Visual Design information