Toast

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

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

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

Usage

Web Component

<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>

React

<ToastContainer>
  <Toast status="success" duration={3000} onToastClose={() => console.log('closed')}>
    Changes saved!
    <Button slot="action" variant="ghost" size="xs">Undo</Button>
  </Toast>
</ToastContainer>

React ToastProvider

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

function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  );
}

function MyComponent() {
  const { showToast } = useToast();

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

Toast Props

Property	Type	Default	Description
open	boolean	false	Whether the toast is visible
status	'success' | 'error' | 'warning'	—	Status icon and color
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