Toast

Notification messages with auto-close and status icons. Use ToastContainer to position toasts.

Import

import '@kittl/ui';

import { Toast } from '@kittl/ui-react/Toast';
import { ToastContainer } from '@kittl/ui-react/ToastContainer';
// Or use the ToastProvider for imperative API:
import { ToastProvider, useToast } from '@kittl/ui-react/ToastProvider';

Usage

<kittl-toast-container>
  <kittl-toast id="my-toast" status="success" duration="3000">
    Changes saved!
    <kittl-button slot="action" variant="ghost" size="xs">Undo</kittl-button>
  </kittl-toast>
</kittl-toast-container>

<script>
document.querySelector('#my-toast').show();
</script>

import { Button, Toast, ToastContainer } from '@kittl/ui-react';

/** Basic Toast usage, rendered live on the docs site. */
export const ToastUsage = () => (
  <ToastContainer>
    <Toast
      status="success"
      duration={3000}
      onToastClose={() => console.log('closed')}
    >
      Changes saved!
      <Button slot="action" variant="ghost" size="xs">
        Undo
      </Button>
    </Toast>
  </ToastContainer>
);

ToastProvider. For an imperative API, wrap your app in ToastProvider and call showToast from useToast:

import { Button } from '@kittl/ui-react';
import { ToastProvider, useToast } from '@kittl/ui-react/ToastProvider';

/** Shows a toast from anywhere beneath the provider. */
const SaveButton = () => {
  const { showToast } = useToast();

  return <Button onClick={() => showToast('Saved!', 'success')}>Save</Button>;
};

/** ToastProvider usage, rendered live on the docs site. */
export const ToastProviderUsage = () => (
  <ToastProvider>
    <SaveButton />
  </ToastProvider>
);

Toast Props

Property	Attribute	Type	Default	Description
open	open	boolean	false	Whether the toast is visible
status	status	ToastStatus	—	Status icon and color
duration	duration	number	3000	Auto-close duration in milliseconds

Toast Methods

Method	Arguments	Description
show()	duration?: number	Show the toast and start auto-close timer
hide()	—	Hide the toast with closing animation

Slots

Slot	Description
(default)	Toast message content
action	Action button or link

Events

Event	Detail	Description
toast-open	—	Toast became visible
toast-close	—	Toast was closed

React props: onToastOpen, onToastClose