Ease-in

import { Toast } from '@base-ui/react/toast';

export function SaveButtonWithToast() {
  return (
    <Toast.Provider>
      <SaveButton />
      <Toast.Portal>
        <Toast.Viewport className='fixed right-4 bottom-4 flex w-80 flex-col gap-2'>
          <ToastList />
        </Toast.Viewport>
      </Toast.Portal>
    </Toast.Provider>
  );
}

function SaveButton() {
  const toastManager = Toast.useToastManager();
  return (
    <button
      type='button'
      onClick={() =>
        toastManager.add({
          title: 'Changes saved',
          description: 'Your project is up to date.'
        })
      }
      className='rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
    >
      Save
    </button>
  );
}

function ToastList() {
  const { toasts } = Toast.useToastManager();
  return toasts.map((toast) => (
    <Toast.Root
      key={toast.id}
      toast={toast}
      swipeDirection='right'
      // In with ease-out. Out with ease-in, cubic-bezier(0.55, 0, 1, 0.45):
      // a slow start that gathers speed until it's gone.
      className='flex items-start gap-3 rounded-xl border bg-background p-4 shadow-lg transition-[opacity,translate] duration-300 ease-out translate-x-(--toast-swipe-movement-x) data-starting-style:translate-y-2 data-starting-style:opacity-0 data-limited:hidden data-swiping:duration-0 data-ending-style:opacity-0 data-ending-style:duration-200 data-ending-style:ease-[cubic-bezier(0.55,0,1,0.45)] motion-safe:data-ending-style:translate-x-full'
    >
      <div className='flex-1'>
        <Toast.Title className='text-sm font-medium' />
        <Toast.Description className='text-sm text-muted-foreground' />
      </div>
      <Toast.Close
        aria-label='Dismiss'
        className='rounded-md px-1.5 text-muted-foreground hover:bg-muted'
      >
        ×
      </Toast.Close>
    </Toast.Root>
  ));
}