Toast

Fixed-position notifications that auto-dismiss. Announces to screen readers via aria-live.

Live trigger

Preview Code click to show

Show successShow errorShow infoChanges saved successfully.Failed to save. Please try again.New version available.

<ac-button variant="primary" onclick="document.getElementById('toast-success').show(3000)">
Show success
</ac-button>
<ac-button variant="danger" onclick="document.getElementById('toast-danger').show(3000)">
Show error
</ac-button>
<ac-button variant="secondary" onclick="document.getElementById('toast-info').show(3000)">
Show info
</ac-button>

<ac-toast id="toast-success" variant="success">Changes saved successfully.</ac-toast>
<ac-toast id="toast-danger" variant="danger">Failed to save. Please try again.</ac-toast>
<ac-toast id="toast-info" variant="info" position="top-center">New version available.</ac-toast>

Copy

Variants (static)

Preview Code

<ac-toast variant="success" open style="position:static">Done</ac-toast>
<ac-toast variant="warning" open style="position:static">Warning</ac-toast>
<ac-toast variant="danger" open style="position:static">Error</ac-toast>
<ac-toast variant="info" open style="position:static">Info</ac-toast>

Copy

JavaScript API

const toast = document.querySelector('ac-toast');
toast.show(3000);  // show + auto-hide after 3s (0 = no auto-hide)
toast.hide();

Attributes

Attribute	Values	Description
open	boolean	Shows the toast
variant	default | success | warning | info | danger	Color scheme
timeout	ms	Auto-hide delay