brents-toasts

brents-toasts

Distributed as a Claude Code plugin: /plugin marketplace add brentspine/brents-toasts then /plugin install brents-toasts@brents-toasts. To install by hand instead, copy this whole docs/ directory (not just this file) to a project's .claude/skills/brents-toasts/ - the links below are relative to files that travel with it either way, so both installs stay useful.

Zero-dependency, framework-agnostic toast/snackbar library. Works as an ESM/CJS import or a plain <script> tag (UMD, global BrentsToasts). No CSS to link: the stylesheet is bundled into the JS.

Install

npm install brents-toasts

import { toasts, ToastColor, ToastSeverity, ToastBuilder, Toasts } from 'brents-toasts';

No-build-step alternative, served via jsDelivr (unpkg also works, drop-in):

<script src="https://cdn.jsdelivr.net/npm/brents-toasts/dist/index.umd.min.js"></script>
<script>BrentsToasts.toasts.showToast('Hello, toast.');</script>

BrentsToasts mirrors the npm named exports 1:1. Full walkthrough: guide/getting-started.md.

The core decision: which call shape

toasts is a ready-to-use singleton. Three equivalent, permanently supported call shapes for showToast; pick whichever reads best, don't mix conventions within one codebase without reason:

// Options object: default choice once you need more than a bare message
toasts.showToast('Saved!', { severity: ToastSeverity.SUCCESS, duration: 5000, title: 'Done' });

// Legacy positional: message, color, duration(ms), closable, allowHtml (5 args, all after message
// optional) - no severity param, so role/aria-live stay at the default (see Config below)
toasts.showToast('Saved!', ToastColor.SUCCESS, 5000, false, false);

// Fluent builder: chainable, same options object under the hood
new ToastBuilder('Saved!').asSuccess().withDuration(5000).withTitle('Done').show();

showToast() returns the toast's id (string); save it if you'll removeToast/updateToast/ control its timer later, or pass your own via id in options to choose it up front instead - see guide/lifecycle.md. Defaults: severity ToastSeverity.INFO (which also picks the default color, ToastColor.INFO - see Config below), duration 3000ms, closable true, allowHtml false, allowLineBreaks true (all overridable via configure(), see guide/config.md). Builder method reference: guide/builder-reference.md.