kit

Toast

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Shell, Home

Toast

Show the toast

Yoga class moved to

Show the toast after Undo

Yoga class moved back to

Yoga class,

Source
<details name="toast">
  <summary>Show the toast</summary>
  <div data-kit-role="toast" data-kit-subjects="toast-subject">
    <p data-kit-region="line" role="status" aria-atomic="true">Yoga class moved to <time datetime="2025-04-17T10:00+01:00"><span>17 April 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time></p>
    <div data-kit-region="actions">
      <button type="submit" form="toast-step" data-kit-role="secondary-action" data-kit-region="undo"><span data-kit-region="label">Undo</span></button>
      <button type="button" data-kit-role="icon-action" data-kit-region="close" aria-label="Close"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
    </div>
  </div>
</details>
<details name="toast">
  <summary>Show the toast after Undo</summary>
  <div data-kit-role="toast">
    <p data-kit-region="line" role="status" aria-atomic="true">Yoga class moved back to <time datetime="2025-04-15T10:00+01:00"><span>15 April 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time></p>
    <div data-kit-region="actions">
      <button type="button" data-kit-role="secondary-action" data-kit-region="redo"><span data-kit-region="label">Redo</span></button>
      <button type="button" data-kit-role="icon-action" data-kit-region="close" aria-label="Close"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
    </div>
  </div>
</details>
<form id="toast-step" method="get" action="#role-toast"></form>
<button type="button" id="toast-replace" data-kit-role="secondary-action"><span data-kit-region="label">Replace</span></button>
<button type="button" id="toast-clear" data-kit-role="secondary-action"><span data-kit-region="label">Clear</span></button>
<p id="toast-subject">Yoga class, <time datetime="2025-04-17T10:00+01:00"><span>17 April 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time></p>

Toast, confirmation

Show the toast

Invoice sent to Oakmere Yoga

Source
<details name="toast">
  <summary>Show the toast</summary>
  <div data-kit-role="toast">
    <p data-kit-region="line" role="status" aria-atomic="true">Invoice sent to Oakmere Yoga</p>
    <div data-kit-region="actions">
      <button type="button" data-kit-role="icon-action" data-kit-region="close" aria-label="Close"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
    </div>
  </div>
</details>

Toast, inert

Show the toast while the move saves

Yoga class moved to

Undo waits until the move has saved.

Close waits until the move has saved.

Show the toast while the undo saves

Yoga class moved back to

Redo waits until the undo has saved.

Close waits until the undo has saved.

Source
<div style="padding-block-end: var(--kit-toast-height, 0px);">
<details name="toast">
  <summary>Show the toast while the move saves</summary>
  <div data-kit-role="toast">
    <p data-kit-region="line" role="status" aria-atomic="true">Yoga class moved to <time datetime="2025-04-17T10:00+01:00"><span>17 April 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time></p>
    <div data-kit-region="actions">
      <button type="button" id="role-toast-inert-undo" data-kit-role="secondary-action" data-kit-region="undo" data-kit-state="inert" disabled aria-describedby="role-toast-inert-undo-words"><span data-kit-region="label">Undo</span></button>
      <p data-kit-region="words" id="role-toast-inert-undo-words">Undo waits until the move has saved.</p>
      <button type="button" id="role-toast-inert-undo-close" data-kit-role="icon-action" data-kit-region="close" data-kit-state="inert" disabled aria-describedby="role-toast-inert-undo-close-words" aria-label="Close"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
      <p data-kit-region="words" id="role-toast-inert-undo-close-words">Close waits until the move has saved.</p>
    </div>
  </div>
</details>
<details name="toast">
  <summary>Show the toast while the undo saves</summary>
  <div data-kit-role="toast">
    <p data-kit-region="line" role="status" aria-atomic="true">Yoga class moved back to <time datetime="2025-04-15T10:00+01:00"><span>15 April 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time></p>
    <div data-kit-region="actions">
      <button type="button" id="role-toast-inert-redo" data-kit-role="secondary-action" data-kit-region="redo" data-kit-state="inert" disabled aria-describedby="role-toast-inert-redo-words"><span data-kit-region="label">Redo</span></button>
      <p data-kit-region="words" id="role-toast-inert-redo-words">Redo waits until the undo has saved.</p>
      <button type="button" id="role-toast-inert-redo-close" data-kit-role="icon-action" data-kit-region="close" data-kit-state="inert" disabled aria-describedby="role-toast-inert-redo-close-words" aria-label="Close"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
      <p data-kit-region="words" id="role-toast-inert-redo-close-words">Close waits until the undo has saved.</p>
    </div>
  </div>
</details>
</div>