Skip to main content
Browse docs

Marwes documentation

Toast

Canonical transient-feedback family with a Toast component, adapter-owned delivery layers, and thin purpose-toast wrappers for common message intent.

What this family solves

Canonical transient-feedback family with a Toast component, adapter-owned delivery layers, and thin purpose-toast wrappers for common message intent.

Use when

  • The UI needs transient, non-blocking feedback with a clear semantic intent such as success, error, warning, or info.
  • The product flow benefits from ToastContainer or ToastProvider for stacked placement and queue management.
  • The team wants React and Vue toast semantics to stay aligned through the central semantic registry and one shared contract file.

Avoid when

  • The message is blocking, requires user decision-making, or should really be a dialog rather than a toast.
  • The implementation cannot provide appropriate live-region urgency or sane dismissal timing for the message severity.
  • The team expects a richer notification center or persistent inbox pattern that goes beyond the current toast family scope.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

ErrorToast, InfoToast, SuccessToast, Toast, ToastContainer, ToastProvider, WarningToast

Types

ErrorToastProps, InfoToastProps, ManagedToast, ShowToastOptions, SuccessToastProps, ToastContainerProps, ToastController, ToastProps, ToastProviderProps, WarningToastProps

Helper

useToast

Vue — @marwes-ui/vue

Components

ErrorToast, InfoToast, SuccessToast, Toast, ToastContainer, ToastProvider, WarningToast

Types

ErrorToastProps, InfoToastProps, ManagedToast, ShowToastOptions, SuccessToastProps, ToastContainerProps, ToastController, ToastProps, ToastProviderProps, WarningToastProps

Helper

useToast

Svelte — @marwes-ui/svelte

Components

ErrorToast, InfoToast, SuccessToast, Toast, ToastContainer, ToastProvider, WarningToast

Types

ErrorToastProps, InfoToastProps, ManagedToast, ShowToastOptions, SuccessToastProps, ToastContainerProps, ToastController, ToastProps, ToastProviderProps, WarningToastProps

Helper

useToast

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { ErrorToast, InfoToast, SuccessToast, Toast, WarningToast } from "@marwes-ui/react"
import { useState } from "react"

export function Example() {
  const [dismissed, setDismissed] = useState<Set<string>>(new Set())
  const dismiss = (id: string) => setDismissed((prev) => new Set([...prev, id]))

  return (
    <>
      {!dismissed.has("neutral") && (
        <Toast variant="subtle" onDismiss={() => dismiss("neutral")}>
          Neutral message
        </Toast>
      )}
      {!dismissed.has("info") && (
        <InfoToast variant="subtle" onDismiss={() => dismiss("info")}>
          Meeting starts in 10 min
        </InfoToast>
      )}
      {!dismissed.has("success") && (
        <SuccessToast variant="subtle" onDismiss={() => dismiss("success")}>
          Your email is verified
        </SuccessToast>
      )}
      {!dismissed.has("warning") && (
        <WarningToast variant="subtle" onDismiss={() => dismiss("warning")}>
          Connection unstable
        </WarningToast>
      )}
      {!dismissed.has("error") && (
        <ErrorToast variant="subtle" onDismiss={() => dismiss("error")}>
          Something went wrong
        </ErrorToast>
      )}
    </>
  )
}

Vue

<script setup lang="ts">
import { ref } from "vue"
import { ErrorToast, InfoToast, SuccessToast, Toast, WarningToast } from "@marwes-ui/vue"

const dismissed = ref<Set<string>>(new Set())
const dismiss = (id: string) => (dismissed.value = new Set([...dismissed.value, id]))
</script>

<template>
  <Toast v-if="!dismissed.has('neutral')" variant="subtle" @dismiss="dismiss('neutral')">
    Neutral message
  </Toast>
  <InfoToast v-if="!dismissed.has('info')" variant="subtle" @dismiss="dismiss('info')">
    Meeting starts in 10 min
  </InfoToast>
  <SuccessToast v-if="!dismissed.has('success')" variant="subtle" @dismiss="dismiss('success')">
    Your email is verified
  </SuccessToast>
  <WarningToast v-if="!dismissed.has('warning')" variant="subtle" @dismiss="dismiss('warning')">
    Connection unstable
  </WarningToast>
  <ErrorToast v-if="!dismissed.has('error')" variant="subtle" @dismiss="dismiss('error')">
    Something went wrong
  </ErrorToast>
</template>

Svelte

<script lang="ts">
  import { ErrorToast, InfoToast, SuccessToast, Toast, WarningToast } from "@marwes-ui/svelte"

  let dismissed = $state<Set<string>>(new Set())
  const dismiss = (id: string) => (dismissed = new Set([...dismissed, id]))
</script>

{#if !dismissed.has("neutral")}
  <Toast variant="subtle" ondismiss={() => dismiss("neutral")}>Neutral message</Toast>
{/if}
{#if !dismissed.has("info")}
  <InfoToast variant="subtle" ondismiss={() => dismiss("info")}>Meeting starts in 10 min</InfoToast>
{/if}
{#if !dismissed.has("success")}
  <SuccessToast variant="subtle" ondismiss={() => dismiss("success")}>Your email is verified</SuccessToast>
{/if}
{#if !dismissed.has("warning")}
  <WarningToast variant="subtle" ondismiss={() => dismiss("warning")}>Connection unstable</WarningToast>
{/if}
{#if !dismissed.has("error")}
  <ErrorToast variant="subtle" ondismiss={() => dismiss("error")}>Something went wrong</ErrorToast>
{/if}

Accessibility requirements

  • Matched announcement urgency: Match ariaLive urgency to the message; reserve assertive announcements for real failures.
  • Readable dismiss timing: Keep a toast visible long enough to read and let people dismiss it before it disappears.
  • Manual review boundary: Real browser and assistive-technology validation for repeated toast announcement timing, interruption feel, and urgency calibration.
  • Manual review 2: Product-level judgment about when the default 4000ms duration is sufficient versus when critical or actionable toasts should stay visible with duration null or a longer explicit timeout.
  • Manual review 3: Any future expansion beyond the current transient feedback and simple queue model.

Theming

Toast uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources