Toast

Toast.vue

<template>
  <button @click="open = true">Open toast</button>

  <Transition name="toast">
    <PeachyToast.Toast v-model:open="open" :close-after="10000">
      This toast will disappear.

      <PeachyToast.Action descriptive-text="Go to 'Actions' to do this action">
        Action
      </PeachyToast.Action>

      <PeachyToast.Close aria-label="Close">
        <CrossSvg />
      </PeachyToast.Close>
    </PeachyToast.Toast>
  </Transition>
</template>

toast.css

.peachy-toast {
  margin: 1.25rem 1rem auto auto;
  width: var(--component-width);

  padding: 1em 2em 1em 1em;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 8px;

  box-shadow: var(--shadow);
}

.peachy-toast__action {
  cursor: pointer;
  border: none;

  margin-top: 0.75rem;

  padding: 0.35em 0.75em;
  background: var(--brand-button-bg);
  border-radius: 10rem;

  font-size: 100%;
  color: var(--brand-button-text);

  transition: background 0.25s;
}

.peachy-toast__action:hover,
.peachy-toast__action:focus-visible {
  background: var(--brand-button-hover-bg);
}

.peachy-toast__close {
  cursor: pointer;

  position: absolute;
  border-radius: 100%;
  background: none;
  border: none;

  display: grid;
  place-content: center;

  top: 1rem;
  right: 1rem;

  padding: var(--icon-button-padding);

  color: var(--color);
  font-size: 100%;

  transition: background 0.25s;
}

.peachy-toast__close:hover {
  background: var(--button-hover-bg);
}

.peachy-toast__close svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* ===== Animation ===== */

@media (prefers-reduced-motion: no-preference) {
  .peachy-toast:popover-open {
    animation: SlideIn 0.25s;
  }
}

@keyframes SlideIn {
  from {
    right: -20rem;
  }

  to {
    right: 0;
  }
}

Anatomy

<template>
  <PeachyToast.Toast>
    <PeachyToast.Action />
    <PeachyToast.Close />
  </PeachyToast.Toast>
</template>

<script lang="ts" setup>
  import { PeachyToast } from "typeach";
</script>

Props & Emits

Toast

Props

Name	Default	Type	Description
is	div	string?	The is attribute for the dynamic root component.
assertive	false	boolean?	The aria-live attribute for the toast.
open	false	boolean?
closeAfter	undefined	number?

Emits

@	Payload
update:open	boolean

Action

Props

Name	Default	Type	Description
descriptiveText		string	A description describing an alternative route for performing this action if they are not able to reach the toast.

Styling

CSS Selectors

Follows our CSS classes convention.

Accessibility

Resources: APG Alert Pattern, Scott O'Hara's "A toast to a11y toasts"

• If closeAfter is set and a user is interacting with the element - the toast will delay closing until the user is no longer interacting with it, the only exception is if the user clicked Close or if you manually update the open property.