Toast

<div class="toast-stack toast-stack--top-end" aria-live="polite">
  <div class="toast toast-success" role="status">
    <span class="toast-icon" aria-hidden="true"></span>
    <div class="toast-body">
      <p class="toast-title">Saved</p>
      <p class="toast-message">Profile updated.</p>
    </div>
    <button type="button" class="toast-close" aria-label="Dismiss">…</button>
  </div>
</div>

import { ToastProvider, useToast, Toast, ToastStack } from 'caustica-design/core'
import 'caustica-design/css'

<ToastProvider dismissLabel="Dismiss" placement="top-end">
  <App />
</ToastProvider>

// inside App:
const { push } = useToast()
push({ tone: 'success', title: 'Saved', message: 'Profile updated.' })

// or static:
<ToastStack placement="bottom-start">
  <Toast tone="info" title="Tip" message="Add an invite." dismissLabel="Dismiss" onDismiss={…} />
</ToastStack>