Toast

Transient notifications. Fire one from anywhere with toast() — no JSX needed at the call site — and mount the Toaster once near your app root. Tones, an optional action, and auto-dismiss.

jlds add toast

Usage

Mount Toaster once; call toast(...) from anywhere. In plain HTML the imperative API lives on JLDS.toast and the container is created for you.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/toast.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/button.css">
<!-- behavior layer: the imperative JLDS.toast API -->
<script src="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/js/core.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/js/toast.js" defer></script>

<button class="jl-btn jl-btn--primary jl-btn--md"
        onclick="JLDS.toast.success('Profile updated')">Show toast</button>

Vue

<script setup lang="ts">
import { Toaster, toast } from "@/components/ui/toast"
import { Button } from "@/components/ui/button"
</script>

<template>
  <!-- mount once near the app root -->
  <Toaster position="bottom-right" />

  <Button @click="toast.success('Profile updated')">Show toast</Button>
</template>

React

import { Toaster, toast } from "@/components/ui/toast"
import { Button } from "@/components/ui/button"

// mount once near the app root:
function App() {
  return (
    <>
      <Toaster position="bottom-right" />
      <Button onClick={() => toast.success("Profile updated")}>Show toast</Button>
    </>
  )
}

Tones, title & action

toast.success / .warning / .danger / .info, or pass an options object with a title, description, an action button, and duration (Infinity keeps it until dismissed).

HTML

<button class="jl-btn jl-btn--secondary" onclick="JLDS.toast.danger('Could not save')">Danger</button>
<button class="jl-btn jl-btn--secondary"
        onclick="JLDS.toast({ title: 'Deploy failed', description: 'Build #1843 errored.',
                 tone: 'danger', action: { label: 'Retry', onClick: function(){} }, duration: Infinity })">
  With action
</button>

Vue

<template>
  <Button @click="toast.danger('Could not save')">Danger</Button>
  <Button @click="toast({
    title: 'Deploy failed',
    description: 'Build #1843 errored.',
    tone: 'danger',
    action: { label: 'Retry', onClick: retry },
    duration: Infinity,
  })">With action</Button>
</template>

React

<Button onClick={() => toast.danger("Could not save")}>Danger</Button>
<Button onClick={() =>
  toast({
    title: "Deploy failed",
    description: "Build #1843 errored.",
    tone: "danger",
    action: { label: "Retry", onClick: retry },
    duration: Infinity,
  })
}>With action</Button>

Async — loading & promise

toast.loading shows a spinner toast that stays until dismissed or replaced. toast.promise shows the loading toast, then resolves it to success or danger when the promise settles (messages may be strings or functions of the resolved value / error).

HTML

<button class="jl-btn jl-btn--primary" onclick="
  JLDS.toast.promise(fetch('/api/deploy'), {
    loading: 'Deploying…', success: 'Build #1843 is live', error: 'Deploy failed'
  })">Deploy</button>

Vue

<template>
  <Button @click="toast.promise(deploy(), {
    loading: 'Deploying…', success: 'Build #1843 is live', error: 'Deploy failed',
  })">Deploy</Button>
</template>

React

<Button onClick={() => toast.promise(deploy(), {
  loading: "Deploying…", success: "Build #1843 is live", error: "Deploy failed",
})}>Deploy</Button>

API

Call	Description
toast(opts | string)	Fire a toast; returns an id (React/Vue) or the element (HTML)
toast.success/warning/danger/info(description, opts?)	Toned shorthands
toast.loading(description, opts?)	Spinner toast that stays until dismissed/replaced
toast.promise(promise, { loading, success, error })	Loading → success/danger on settle
toast.dismiss(id)	Dismiss by id (HTML: pass the returned element)

ToastOptions: title, description, tone, duration (ms; Infinity/0 = sticky, default 4500), action: { label, onClick }, id (reuse to update an existing toast).

Toaster (React/Vue) — position: bottom-right (default) · bottom-left · top-right · top-left · top-center. In HTML, pass position in the options and the matching container is created automatically.

CSS classes (HTML)

Class	Purpose
.jl-toaster + data-pos="…"	The fixed stack container (auto-created)
.jl-toast + --success / --warning / --danger / --info / --loading	A toast and its tone
.jl-toast__icon / __spin / __body / __title / __desc / __action / __close	Toast parts
[data-leaving="true"]	Plays the exit animation before removal