Toast

Surface short operational updates that should stay visible long enough to be noticed.

Usage

Click the same Show Toast action as many times as needed. The bottom-right deck keeps the newest three Toasts visible, with its own close, Undo, and auto-hide behavior.

Keep messages concise, use polite live-region priority for routine updates, and provide durable workflow feedback elsewhere when a notification represents a state that must persist.

Toast

{"title": "Moo UI Toast - Basic", "description": "Use .toast with polite live-region attributes, a .toast-header, a dismiss button, and a .toast-body for routine feedback.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<button class=\"btn btn-outline-secondary\" type=\"button\" data-toast-target=\"#toast-basic-template\">Show Toast</button>\n<div class=\"toast-container position-fixed bottom-0 end-0 p-3 toast-container--stacked\" data-toast-stack=\"deck\">\n  <template id=\"toast-basic-template\" data-toast-template=\"toast\">\n    <div\n      id=\"toast-basic-template\"\n      class=\"toast\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      <div class=\"toast-header\">\n        <strong class=\"me-auto\">Event created</strong>\n        <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" data-bs-dismiss=\"toast\"></button>\n      </div>\n      <div class=\"toast-body\">Sunday, December 3 at 9:00 AM</div>\n    </div>\n  </template>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "toast", "components"], "editors": "110", "js_module": false}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div
  id="toast-basic"
  class="toast"
  role="status"
  aria-live="polite"
  aria-atomic="true"
>
  <div class="toast-header">
    <strong class="me-auto">Event created</strong>
      <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Sunday, December 3 at 9:00 AM
  </div>
</div>

Toast

{"title": "Moo UI Toast - Variants", "description": "Use variant=\"success\" or another supported variant in a Moo macro. In plain HTML, set data-toast-variant=\"success\" on the .toast root. Catalog data-toast-target attributes only wire demo buttons; urgent failures still need priority=\"assertive\" in macros or role=\"alert\" with aria-live=\"assertive\" in plain HTML. The loading variant is visual only and does not auto-resolve a Promise.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"d-flex flex-wrap gap-2\">\n  <button class=\"btn btn-outline-secondary\" type=\"button\" data-toast-target=\"#toast-variant-success-template\">Success</button>\n  <button class=\"btn btn-outline-secondary\" type=\"button\" data-toast-target=\"#toast-variant-info-template\">Info</button>\n  <button class=\"btn btn-outline-secondary\" type=\"button\" data-toast-target=\"#toast-variant-warning-template\">Warning</button>\n  <button class=\"btn btn-outline-secondary\" type=\"button\" data-toast-target=\"#toast-variant-destructive-template\">Destructive</button>\n  <button class=\"btn btn-outline-secondary\" type=\"button\" data-toast-target=\"#toast-variant-loading-template\">Loading</button>\n</div>\n<div class=\"toast-container position-fixed bottom-0 end-0 p-3 toast-container--stacked\" data-toast-stack=\"deck\">\n  <template id=\"toast-variant-success-template\" data-toast-template=\"toast\">\n    <div\n        id=\"toast-variant-success-template\"\n        class=\"toast\"\n    data-toast-variant=\"success\"    role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n      <div class=\"toast-header\">\n        <span class=\"toast-status-icon\" aria-hidden=\"true\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"circle-check\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <path d=\"m9 12l2 2l4-4\"/>\n            </g>\n          </svg>\n        </span>\n        <strong class=\"me-auto\">Event created</strong>\n        <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" data-bs-dismiss=\"toast\"></button>\n      </div>\n      <div class=\"toast-body\">The event was added to your calendar.</div>\n    </div>\n  </template>\n  <template id=\"toast-variant-info-template\" data-toast-template=\"toast\">\n    <div\n        id=\"toast-variant-info-template\"\n        class=\"toast\"\n    data-toast-variant=\"info\"    role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n      <div class=\"toast-header\">\n        <span class=\"toast-status-icon\" aria-hidden=\"true\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"info\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <path d=\"M12 16v-4m0-4h.01\"/>\n            </g>\n          </svg>\n        </span>\n        <strong class=\"me-auto\">Heads up</strong>\n        <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" data-bs-dismiss=\"toast\"></button>\n      </div>\n      <div class=\"toast-body\">Invitees will receive an email confirmation.</div>\n    </div>\n  </template>\n  <template id=\"toast-variant-warning-template\" data-toast-template=\"toast\">\n    <div\n        id=\"toast-variant-warning-template\"\n        class=\"toast\"\n    data-toast-variant=\"warning\"    role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n      <div class=\"toast-header\">\n        <span class=\"toast-status-icon\" aria-hidden=\"true\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"triangle-alert\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01\"/>\n          </svg>\n        </span>\n        <strong class=\"me-auto\">Check availability</strong>\n        <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" data-bs-dismiss=\"toast\"></button>\n      </div>\n      <div class=\"toast-body\">Two invitees have a scheduling conflict.</div>\n    </div>\n  </template>\n  <template id=\"toast-variant-destructive-template\" data-toast-template=\"toast\">\n    <div\n        id=\"toast-variant-destructive-template\"\n        class=\"toast\"\n    data-toast-variant=\"destructive\"    role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n      >\n      <div class=\"toast-header\">\n        <span class=\"toast-status-icon\" aria-hidden=\"true\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"circle-alert\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <path d=\"M12 8v4m0 4h.01\"/>\n            </g>\n          </svg>\n        </span>\n        <strong class=\"me-auto\">Event not created</strong>\n        <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" data-bs-dismiss=\"toast\"></button>\n      </div>\n      <div class=\"toast-body\">The calendar service could not be reached.</div>\n    </div>\n  </template>\n  <template id=\"toast-variant-loading-template\" data-toast-template=\"toast\">\n    <div\n        id=\"toast-variant-loading-template\"\n        class=\"toast\"\n    data-toast-variant=\"loading\"    role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n      <div class=\"toast-header\">\n        <span class=\"toast-status-icon\" aria-hidden=\"true\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"loader-circle\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>\n          </svg>\n        </span>\n        <strong class=\"me-auto\">Syncing calendar</strong>\n        <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" data-bs-dismiss=\"toast\"></button>\n      </div>\n      <div class=\"toast-body\">This can take a moment.</div>\n    </div>\n  </template>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "toast", "components"], "editors": "110", "js_module": false}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135<div
    id="toast-variant-success"
    class="toast"
data-toast-variant="success"    role="status"
    aria-live="polite"
    aria-atomic="true"
  >
    <div class="toast-header">
<span class="toast-status-icon" aria-hidden="true"><svg
  data-icon="inline-start"
  data-lucide="circle-check"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m9 12l2 2l4-4"/></g>
</svg></span>      <strong class="me-auto">Event created</strong>
        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      The event was added to your calendar.
    </div>
  </div>
        <div
    id="toast-variant-info"
    class="toast"
data-toast-variant="info"    role="status"
    aria-live="polite"
    aria-atomic="true"
  >
    <div class="toast-header">
<span class="toast-status-icon" aria-hidden="true"><svg
  data-icon="inline-start"
  data-lucide="info"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></g>
</svg></span>      <strong class="me-auto">Heads up</strong>
        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Invitees will receive an email confirmation.
    </div>
  </div>
        <div
    id="toast-variant-warning"
    class="toast"
data-toast-variant="warning"    role="status"
    aria-live="polite"
    aria-atomic="true"
  >
    <div class="toast-header">
<span class="toast-status-icon" aria-hidden="true"><svg
  data-icon="inline-start"
  data-lucide="triangle-alert"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/>
</svg></span>      <strong class="me-auto">Check availability</strong>
        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Two invitees have a scheduling conflict.
    </div>
  </div>
        <div
    id="toast-variant-destructive"
    class="toast"
data-toast-variant="destructive"    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="toast-header">
<span class="toast-status-icon" aria-hidden="true"><svg
  data-icon="inline-start"
  data-lucide="circle-alert"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></g>
</svg></span>      <strong class="me-auto">Event not created</strong>
        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      The calendar service could not be reached.
    </div>
  </div>
        <div
    id="toast-variant-loading"
    class="toast"
data-toast-variant="loading"    role="status"
    aria-live="polite"
    aria-atomic="true"
  >
    <div class="toast-header">
<span class="toast-status-icon" aria-hidden="true"><svg
  data-icon="inline-start"
  data-lucide="loader-circle"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></span>      <strong class="me-auto">Syncing calendar</strong>
        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      This can take a moment.
    </div>
  </div>

Component reference

Status: Accepted
Runtime: Bootstrap plugin
Markup: Moo UI documented extension
Reference: For Bootstrap's Toast plugin options and accessibility notes, see the Bootstrap Toasts documentation.

Usage

Basic

Variants

Component reference

Search documentation

Settings