Sonner

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerBasic() {
  return (
    <Button onClick={() => toast('Event has been created')}>Show Toast</Button>
  );
}

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerWithDescription() {
  return (
    <Button
      onClick={() =>
        toast('Event has been created', {
          description: 'Sunday, December 03, 2023 at 9:00 AM',
        })
      }
    >
      Show Toast with Description
    </Button>
  );
}

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerSuccess() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button onClick={() => toast.success('Successfully saved!')}>
        Success
      </Button>
      <Button
        onClick={() =>
          toast.success('Profile updated', {
            description: 'Your profile has been updated successfully.',
          })
        }
      >
        Success with Description
      </Button>
    </div>
  );
}

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerError() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button onClick={() => toast.error('Something went wrong')}>Error</Button>
      <Button
        onClick={() =>
          toast.error('Failed to save', {
            description:
              'There was an error saving your changes. Please try again.',
          })
        }
      >
        Error with Description
      </Button>
    </div>
  );
}

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerWarning() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button onClick={() => toast.warning('Low disk space')}>Warning</Button>
      <Button
        onClick={() =>
          toast.warning('Storage warning', {
            description:
              'Your storage is almost full. Please free up some space.',
          })
        }
      >
        Warning with Description
      </Button>
    </div>
  );
}

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerWithAction() {
  return (
    <Button
      onClick={() =>
        toast('Event has been created', {
          description: 'Sunday, December 03, 2023 at 9:00 AM',
          action: {
            label: 'Undo',
            onClick: () => toast.success('Undo successful'),
          },
        })
      }
    >
      Toast with Action
    </Button>
  );
}

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerPromise() {
  return (
    <Button
      onClick={() => {
        const promise = () =>
          new Promise((resolve) =>
            setTimeout(() => resolve({ name: 'Sonner' }), 2000)
          );

        toast.promise(promise, {
          loading: 'Loading...',
          success: (data: any) => {
            return `${data.name} toast has been added`;
          },
          error: 'Error',
        });
      }}
    >
      Promise Toast
    </Button>
  );
}

import { toast } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

export function SonnerPositions() {
  return (
    <div className="grid grid-cols-3 gap-3">
      <Button onClick={() => toast('Top Left', { position: 'top-left' })}>
        Top Left
      </Button>
      <Button onClick={() => toast('Top Center', { position: 'top-center' })}>
        Top Center
      </Button>
      <Button onClick={() => toast('Top Right', { position: 'top-right' })}>
        Top Right
      </Button>
      <Button onClick={() => toast('Bottom Left', { position: 'bottom-left' })}>
        Bottom Left
      </Button>
      <Button
        onClick={() => toast('Bottom Center', { position: 'bottom-center' })}
      >
        Bottom Center
      </Button>
      <Button
        onClick={() => toast('Bottom Right', { position: 'bottom-right' })}
      >
        Bottom Right
      </Button>
    </div>
  );
}