Toast
Usage notes
Toasts display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.
Default
Toggle markup
<button is="coral-button" onclick="defaultToast.show()">Show toast</button>
<coral-toast id="defaultToast">Default toast</coral-toast>
Variants and Placement
Toggle markup
<button is="coral-button" onclick="infoToast.show()">Show Left Info toast</button>
<button is="coral-button" onclick="errorToast.show()">Show Centered Error toast</button>
<button is="coral-button" onclick="successToast.show()">Show Right Success toast</button>
<coral-toast id="infoToast" variant="info" placement="left">Info toast</coral-toast>
<coral-toast id="errorToast" variant="error">Error toast</coral-toast>
<coral-toast id="successToast" variant="success" placement="right">Success toast</coral-toast>
With action
Toggle markup
<button is="coral-button" onclick="actionToast.show()">Show Toast</button>
<coral-toast id="actionToast">
<coral-toast-content>Default toast</coral-toast-content>
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>
<script>
actionToast.addEventListener('click', function(event) {
if (event.target.closest('[coral-toast-action]')) {
alert('action clicked');
actionToast.hide();
}
})
</script>
Customized auto-dismiss
Toggle markup
<button is="coral-button" onclick="dismissToast1.show();dismissToast2.show();">Show toast</button>
<coral-toast id="dismissToast1" autodismiss="10000">
Dismissed after 10 seconds
</coral-toast>
<coral-toast id="dismissToast2" autodismiss="0">
Toast is not dismissed automatically
</coral-toast>
Created with JS
Toggle markup
<button is="coral-button" id="JSToast">Show toast</button>
<script>
JSToast.addEventListener('click', function() {
const toast = new Coral.Toast().set({
content: {
textContent: 'A new version of Lightroom Classic is now available'
}
});
toast.style.width = '318px';
toast.show();
});
</script>
Toast priority queue
Toggle markup
<button is="coral-button" id="queueToast">Show toast queue</button>
<script>
queueToast.addEventListener('click', function() {
const toasts = document.getElementsByClassName('multiple');
for (var i = 0; i < toasts.length; i++) {
toasts[i].show();
}
});
</script>
<coral-toast variant="error" class="multiple">
Priority 2
</coral-toast>
<coral-toast variant="success" placement="right" class="multiple">
Priority 3a
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>
<coral-toast variant="info" placement="left" class="multiple">
Priority 7
</coral-toast>
<coral-toast placement="right" class="multiple">
Priority 5
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>
<coral-toast variant="success" class="multiple">
Priority 6
</coral-toast>
<coral-toast placement="right" class="multiple">
Priority 8
</coral-toast>
<coral-toast variant="error" placement="right" class="multiple">
Priority 1a
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>
<coral-toast variant="info" class="multiple">
Priority 4
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>
<coral-toast variant="success" placement="right" class="multiple">
Priority 3b
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>
<coral-toast variant="error" placement="right" class="multiple">
Priority 1b
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>
<coral-toast variant="success" placement="right" class="multiple">
Priority 3c
<button is="coral-button" coral-toast-action="">Action</button>
</coral-toast>