Heartwood

Toast: Negative 

<div class="toast toast-negative">
    <div class="toast__header">
        Oh No!
        <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">Something terrible just happened. Good luck…</div>
</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": "Oh No!",
  "body": "Something terrible just happened. Good luck…",
  "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
}

Toast

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.

Guidelines:

  • Use variations as appropriate; the Toast includes a positive and negative variation that should be used for success and failure respectively. If an outcome is neutral, don’t use a variation.
  • When to include an ‘Undo’; if the outcome of an action removes something from the interface, the corresponding Toast should include an ‘Undo’ action.
  • Timeouts; make sure that the timeout is long enough for text to be read at a deliberate pace.
  • Avoid over-stacking; whenever possible, update a Toast’s content rather than stacking duplicate Toasts

When to use:

Use a Toast when the outcome of an action is not immediately obvious, or if the user may want to undo the action.

When not to use:

  • Don’t be redundant; if the outcome of an action is immediately obvious, Toast doesn’t need to be used
  • As a crutch; avoiding using Toast to cover up performance issues.