Toast are like a notification. Toast provide user information about what process app is doing and will perform. They appear for short time and dissapear afterwords. You can also call then snackbars.
This is the basic toast. This dosen't appear like that. For showing purposes we have removed it's position property.
<section class="toast toast--demo">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
You can see live demo by clicking the button below. These component require you to include our javascript for the interactivity.
<button class="show-toast">Live Demo</button>
<section class="toast toast--baseline toast--hide">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
You can change where your toast appear in the view using custom classes. Use class .toast--baseline to position toast at bottom center. Similarly you can use classes like .toast--top-left etc.
<button class="show-toast">Bottom Center</button>
<section class="toast toast--baseline toast--hide">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
<button class="show-toast">Bottom Left</button>
<section class="toast toast--leading toast--hide">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
<button class="show-toast">Bottom Right</button>
<section class="toast toast--right toast--hide">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
<button class="show-toast">Top Left</button>
<section class="toast toast--top-left toast--hide">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
<button class="show-toast">Top Center</button>
<section class="toast toast--top-center toast--hide">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
<button class="show-toast">Top Right</button>
<section class="toast toast--top-right toast--hide">
<p class="toast__message">Can't send photo. Retry in 5 seconds.</p>
<button class="toast__retry-btn">Retry</button>
<span class="material-icons toast__clear-btn md-18">clear</span>
</section>
You can customize toast like success, danger etc. Use classe .toast--success to create a success toast.
<button class="show-toast">Show success Toast</button>
<section class="toast toast--baseline toast--hide toast--success">
<div class="align-toast">
<span class="material-icons toast__clear-btn">check</span>
<p class="toast__message">This is success Toast.</p>
</div>
</section>
<button class="show-toast">Show danger Toast</button>
<section class="toast toast--baseline toast--hide toast--danger">
<div class="align-toast">
<span class="material-icons toast__clear-btn">error</span>
<p class="toast__message">This is danger Toast.</p>
</div>
</section>
<button class="show-toast">Show warning Toast</button>
<section class="toast toast--baseline toast--hide toast--warning">
<div class="align-toast">
<span class="material-icons toast__clear-btn">warning</span>
<p class="toast__message">This is warning Toast.</p>
</div>
</section>