Toast UI Elements

---
// Toast — recovered from blurr-components.pages.dev
// blurr-lint-disable H1, H2
---

<!-- blurr-lint-disable H1, H2 -->
<div class="preview-wrapper--centered" style="flex-direction:column;gap:0.75rem"> <div class="toast-container toast-container--bottom-right" id="toast-container" data-component="toast" aria-live="polite" aria-label="Notificaties"></div>   <p style="font-size:0.875rem;color:var(--color-muted);margin-bottom:0.5rem">Klik om een toast te tonen:</p> <div style="display:flex;gap:0.625rem;flex-wrap:wrap;justify-content:center"> <button onclick="window.toast('Opgeslagen!', {variant:'success',title:'Succes'})" style="background:#16a34a;color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.8125rem;cursor:pointer">&#10003; Succes</button> <button onclick="window.toast('Er ging iets mis.', {variant:'error',title:'Fout'})" style="background:#dc2626;color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.8125rem;cursor:pointer">&times; Error</button> <button onclick="window.toast('Let op deze melding.', {variant:'warning',title:'Waarschuwing'})" style="background:#d97706;color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.8125rem;cursor:pointer">! Warning</button> <button onclick="window.toast('Update beschikbaar.', {variant:'info'})" style="background:var(--color-accent,#6366f1);color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.8125rem;cursor:pointer">i Info</button> </div> </div>

<style>
,:before,:after{box-sizing:border-box;margin:0;padding:0}
.preview-wrapper--centered{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:#f9f9fb}
</style>