Alert

Alert dialogs for confirmations and important messages.

Installation

Package

import { AlertProvider, useAlert } from '@smc/darwin-ui';

shadcn CLI

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/alert.json

Setup

Wrap your app with AlertProvider:

import { AlertProvider } from '@smc/darwin-ui';

function App() {
  return (
    <AlertProvider>
      <YourApp />
    </AlertProvider>
  );
}

Usage

import { useAlert, Button } from '@smc/darwin-ui';

export function Example() {
  const { showAlert } = useAlert();

  return (
    <Button
      variant="destructive"
      onClick={() =>
        showAlert({
          title: 'Delete Item?',
          message: 'This action cannot be undone.',
          type: 'warning',
          onConfirm: () => console.log('Deleted'),
        })
      }
    >
      Delete
    </Button>
  );
}

Types

showAlert({ type: 'info', ... });
showAlert({ type: 'success', ... });
showAlert({ type: 'warning', ... });
showAlert({ type: 'error', ... });

API Reference

useAlert Hook

const { showAlert } = useAlert();

showAlert Options

Option	Type	Default	Description
title	string	-	Alert title
message	string	-	Alert message
type	AlertType	"info"	Alert variant
onConfirm	() => void	-	Confirm callback
onCancel	() => void	-	Cancel callback

AlertType

type AlertType = 'info' | 'success' | 'warning' | 'error';