---
description: How to add and style 'toast' parts.
---

# Toast

## What is a 'Toast' Part?

Toasts are small, non-intrusive messages that appear on the screen to provide feedback to users. These messages typically appear at the bottom or top of the screen and disappear after a short duration or can be dismissed by the user. Toasts are used to notify users of various events without disrupting their workflow.

{% hint style="success" %}
**Location in the Parts Library:** Base Parts > Feedback > Toast
{% endhint %}

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FhIv9ScIfrIOdlSmUhP9X%2FToastExamples.png?alt=media&#x26;token=3a94ab31-27d1-4360-b8f4-d0dabf7458a7" alt=""><figcaption><p>Toast Examples</p></figcaption></figure>

## Formatting Toast Parts

A Toast part (parent) contains one or more alerts (children).&#x20;

### Changing the Position of A Toast Part <a href="#changing-the-side-of-the-chat-bubble" id="changing-the-side-of-the-chat-bubble"></a>

A Toast part can be aligned horizontally at the start, center, or end. It can be aligned vertically at the top, middle, or bottom.

To set the horizontal and vertical alignment, select the Toast part.

Then go to the 'Align Horizontal' property, and choose whether the Toast should be at the start, center, or end. Then go to the 'Align Vertical' property, and choose whether the Toast should be at the top, middle, or bottom.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FSqgjOM28QBthcMPArfy0%2FToastPosition.gif?alt=media&#x26;token=f7ce5d7a-c439-4b52-9550-d4542c973727" alt=""><figcaption><p>Changing the Position of the Toast Part</p></figcaption></figure>

### Editing and Styling Alert Parts (Inside the Toast Part) <a href="#editing-and-styling-a-keyboard-part" id="editing-and-styling-a-keyboard-part"></a>

Styling will occur on the [Alert](alerts) part of the Toast. Like many other parts, [borders](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/borders), [shadow](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/shadow), [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity), [rounding](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/rounding), and [spacing](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/spacing) can be applied using the property editor on the right, once the alert has been selected.

The [text](https://appeggiohelp.gitbook.io/appeggio-help/frequently-used-parts/text) within the alert is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.

You can add a [background image](../../customising-and-formatting/background-images) to the Alert, as well as an [icon](../../frequently-used-parts/icons).



## Related Information

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Alerts</mark></td><td></td><td></td><td><a href="alerts">alerts</a></td></tr><tr><td><mark style="color:orange;">Icons</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/icons">icons</a></td></tr><tr><td><mark style="color:orange;">Text</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/text">text</a></td></tr><tr><td><mark style="color:orange;">Customizing and formatting</mark></td><td></td><td></td><td><a href="../../customising-and-formatting">customising-and-formatting</a></td></tr></tbody></table>
