Skip to content
heyrav design system
ComponentsIn tools

Toast

A short ink pill at the top of the screen that confirms something happened, then leaves.

Used onTool copy and export
Show code
<button class="btn btn-ghost" data-toast="Link copied">Neutral</button>
<button class="btn btn-ghost" data-toast="Saved to the system" data-tone="ok">Success</button>
<button class="btn btn-ghost" data-toast="Export failed - try a smaller size" data-tone="danger">Error</button>
heyrav.toast('Link copied');
heyrav.toast('Export failed - try a smaller size', { tone: 'danger', ms: 4000 });
  • Lives in a role="status" region, so screen readers announce it politely.
  • 2.4s by default; errors deserve longer, and anything the user must act on belongs in the page, not a toast.
  • An ink surface in both themes, so its status icons use the opposite theme's values (--ok-inv).