Toast
Fixed-position notifications that auto-dismiss. Announces to screen readers via aria-live.
Live trigger
Section titled “Live trigger” click to show
<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> Variants (static)
Section titled “Variants (static)”<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> JavaScript API
Section titled “JavaScript API”const toast = document.querySelector('ac-toast');toast.show(3000); // show + auto-hide after 3s (0 = no auto-hide)toast.hide();Attributes
Section titled “Attributes”| Attribute | Values | Description |
|---|---|---|
open | boolean | Shows the toast |
variant | default | success | warning | info | danger | Color scheme |
timeout | ms | Auto-hide delay |