Toast

Source

• Toast.css
• Toast.js

Example CSS

@import "winduum/src/components/toast/props/content.css" layer(theme);
@import "winduum/src/components/toast/props/default.css" layer(theme);
@import "winduum/src/components/toast/content.css" layer(utilities);
@import "winduum/src/components/toast/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-toast-inline-size: 8rem;
    --x-toast-transition-duration: 200ms;
  }
}

Winduum CSS Code

winduum/src/components/toast/props/content.css

:root, :host {
  --x-toast-content-border-radius: var(--radius-2xl);
  --x-toast-content-padding-block: calc(var(--spacing) * 3);
  --x-toast-content-padding-inline: calc(var(--spacing) * 4);
  --x-toast-content-gap: calc(var(--spacing) * 5);
  --x-toast-content-background-color: var(--color-body-primary);
}

winduum/src/components/toast/props/default.css

:root, :host {
  --x-toast-inline-size: 20rem;
  --x-toast-transition-duration: calc(var(--default-transition-duration) * 2);
}

winduum/src/components/toast/content.css

.x-toast-content {
  border-radius: var(--x-toast-content-border-radius);
  padding: var(--x-toast-content-padding-block) var(--x-toast-content-padding-inline);
  gap: var(--x-toast-content-gap);
  background-color: var(--x-toast-content-background-color);
  color: var(--x-toast-content-color, var(--color-accent));
  border:
    var(--x-toast-content-border-width, 1px) solid
    color-mix(
      in var(--x-toast-content-border-color-space, srgb),
      var(--x-toast-content-border-color, var(--color-accent)) var(--x-toast-content-border-color-opacity, 15%),
      var(--x-toast-content-border-color-mix, var(--color-body-primary))
    );
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  align-items: center;
  display: flex;
  height: fit-content;
}

winduum/src/components/toast/default.css

.x-toast {
  inline-size: min(100%, var(--x-toast-inline-size));
  block-size: var(--x-toast-block-size);
  transition: all var(--x-toast-transition-duration) var(--x-toast-transition-timing-function, var(--ease-in-out));
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0%;

  .flex-col-reverse & {
    justify-content: flex-end;
  }

  &[data-open] {
    margin-block: var(--x-toaster-margin-block);
  }

  &[data-open]:where(:nth-last-child(-n+3)) {
    visibility: visible;
    opacity: 100%;
  }

  &[data-closed] {
    visibility: hidden;
    opacity: 0%;
    height: 0;
    margin-block: 0;
  }
}

Stimulus Actions

show

Shows an existing toast via showToast method.
You can add any params from options via Invoke params.

<button class="x-button" data-invoke-action="x-toast#show" data-invoke-target="#toastElement">
    Show toast
</button>

<ol class="x-toaster items-end">
    <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" id="toastElement">
        <div class="x-toast-content">
            <div class="flex-col">
                <div class="x-title">Hello toast</div>
                <div class="x-text">Fresh toast from oven</div>
            </div>
            <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
        </div>
    </li>
</ol>

close

<li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast">
    <div class="x-toast-content">
        <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
    </div>
</li>

Tips

• To show toast programmatically, you can append the HTML to .x-toaster

document.querySelector('.x-toaster').insertAdjacentHTML('beforeend', `
    <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" data-x-toaster-show-value='{ "autohide": 3000 }'>
        <div class="x-toast-content">
            <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
        </div>
    </li>
`)

• You can also use the useController('x-toast', '#toastElement').invoke('show') invoke method to show existing toast.