Sand Alerts

Alert Examples

Experience Sand Alerts through these interactive examples. Each card demonstrates a different alert type with its specific styling and sound effects.

Success Alert

Indicates a successful operation with a pleasant sound effect and green styling.

import { useAlert } from 'sand-alerts';
import { CheckCircle } from 'lucide-react';

const SuccessExample = () => {
  const { showAlert } = useAlert();
  return (
    <button onClick={() => showAlert({
      type: 'success',
      message: 'Operation successful!',
      icon: CheckCircle,
      playSound: true,
      soundOptions: { volume: 0.6 }
    })}>
      Trigger Success
    </button>
  );
};

Error Alert

Highlights an error with a distinct alert tone and red styling for visibility.

import { useAlert } from 'sand-alerts';
import { XCircle } from 'lucide-react';

const ErrorExample = () => {
  const { showAlert } = useAlert();
  return (
    <button onClick={() => showAlert({
      type: 'error',
      message: 'An error occurred!',
      icon: XCircle,
      playSound: true,
      soundOptions: { volume: 0.4 }
    })}>
      Trigger Error
    </button>
  );
};

Warning Alert

Cautions the user with a looping sound option and yellow styling for attention.

import { useAlert } from 'sand-alerts';
import { AlertCircle } from 'lucide-react';

const WarningExample = () => {
  const { showAlert } = useAlert();
  return (
    <button onClick={() => showAlert({
      type: 'warning',
      message: 'Proceed with caution!',
      icon: AlertCircle,
      playSound: true,
      soundOptions: { loop: true }
    })}>
      Trigger Warning
    </button>
  );
};

Info Alert

Provides neutral information with a subtle sound and blue styling.

import { useAlert } from 'sand-alerts';
import { Info } from 'lucide-react';

const InfoExample = () => {
  const { showAlert } = useAlert();
  return (
    <button onClick={
        () => showAlert ({
      type: 'info',
      message:
       'Here is some information.',
      icon:
       Info,
      playSound:
       true,
      soundOptions:
       { volume: 0.5 }
    })}>
      Trigger Info
    </button>
  );
};

Double Check Alert

Prompts user confirmation with a secure styling and moderate sound.

import { useAlert } from 'sand-alerts';
import { Shield } from 'lucide-react';

const DoubleCheckExample = () => {
  const { showAlert } = useAlert();
  return (
    <button onClick={() => showAlert({
      type: 'confirm',
      message: 'Are you sure you want to proceed?',
      icon: Shield,
      playSound: true,
      soundOptions: { volume: 0.5 },
      confirm: {
        onConfirm: () => SuccessAlert(),
        onCancel: () => CancelAlert()
      }
    })}>
      Trigger Double Check
    </button>
  );
};

Custom Alert

A fully customized alert with animations, custom icon, and unique styling.

import { useAlert } from 'sand-alerts';
import { Star } from 'lucide-react';

const CustomExample = () => {
  const { showAlert } = useAlert();
  return (
    <button onClick={
        () => showAlert({
      type: 'custom',
      message: 
      'Custom alert activated!',
      icon: Star,
      playSound: true,
      soundOptions: { volume: 0.7,
       customSound: '/sounds/custom.mp3' },
      animation: 'slide',
      duration: 5000
    })}>
      Trigger Custom
    </button>
  );
};

Ready to Implement Sand Alerts?

Explore detailed implementation guides and advanced configuration options to fully customize alerts for your application.