<div class="toast toast-negative">
<div class="toast__header">
Team Deleted
<button class="btn btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toast__body">You just deleted your entire team.</div>
<button class="btn " type="button">
<span class="btn__inner">
<span class="btn__text">Undo</span>
</span>
</button>
</div>
<div class="toast{{#if isNegative}} toast-negative{{/if}}{{#if isPositive}} toast-positive{{/if}}">
{{> @toast-header text=headline}}
<div class="toast__body">{{body}}</div>
{{#if footerAction}}
{{> @simple-button text="Undo"}}
{{/if}}
</div>
{
"headline": "Team Deleted",
"body": "You just deleted your entire team.",
"isPositive": null,
"removeIcon": "<path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
"isNegative": true,
"footerAction": true
}
Toast is a floating element that provides a user with feedback on an action they’ve taken. It may include an action, such as ‘Undo’, may be dismissed by a user, and in most cases should disappear on its own.
Use a Toast when the outcome of an action is not immediately obvious, or if the user may want to undo the action.