sigpro-ui/docs/components/alert.md

Alert

Alert component for displaying contextual messages, notifications, and feedback with different severity levels. Supports soft and solid variants.

Tag

Alert

Props

Prop	Type	Default	Description
class	string	''	Additional CSS classes (DaisyUI + Tailwind)
children	string | VNode | Array<VNode>	Required	Alert content

Styling

Alert supports all daisyUI Alert classes:

Category	Classes	Description
Color	alert-info, alert-success, alert-warning, alert-error	Alert type variants
Style	alert-soft (default), alert-solid	Visual style variants

For further details, check the daisyUI Alert Documentation – Full reference for CSS classes.

Live Examples

Basic Alerts

Live Demo

const { Alert, Div, mount } = window;

const BasicDemo = () => {
  return div({ class: 'flex flex-col gap-3' }, [
    Alert({ class: 'alert-info' }, 'This is an informational message.'),
    Alert({ class: 'alert-success' }, 'Operation completed successfully!'),
    Alert({ class: 'alert-warning' }, 'Please review your input before proceeding.'),
    Alert({ class: 'alert-error' }, 'An error occurred while processing your request.')
  ]);
};
mount(BasicDemo, '#demo-basic');

Soft vs Solid Variants

Live Demo

const { Alert, Div, mount } = window;

const VariantsDemo = () => {
  return div({ class: 'flex flex-col gap-3' }, [
    Alert({ class: 'alert-info alert-soft' }, 'Soft info alert'),
    Alert({ class: 'alert-info alert-solid' }, 'Solid info alert'),
    Alert({ class: 'alert-success alert-soft' }, 'Soft success alert'),
    Alert({ class: 'alert-success alert-solid' }, 'Solid success alert')
  ]);
};
mount(VariantsDemo, '#demo-variants');

With Actions

Live Demo

const { Alert, Button, Div, mount, Toast } = window;

const ActionsDemo = () => {
  const showUndo = $(false);
  const deletedItem = $(null);
  
  const deleteItem = (item) => {
    deletedItem(item);
    showUndo(true);
    setTimeout(() => {
      if (showUndo()) {
        showUndo(false);
        Toast('Item permanently deleted', 'alert-info', 2000);
      }
    }, 5000);
  };
  
  const undoDelete = () => {
    showUndo(false);
    Toast(`Restored: ${deletedItem()}`, 'alert-success', 2000);
  };
  
  return div({ class: 'flex flex-col gap-4' }, [
    div({ class: 'flex gap-2' }, [
      button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'),
      button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B')
    ]),
    () => showUndo() ? Alert({ class: 'alert-warning alert-soft flex justify-between items-center' }, [
      span({}, `Deleted: ${deletedItem()}`),
      button({ class: 'btn btn-sm btn-primary', onclick: undoDelete }, 'Undo')
    ]) : null
  ]);
};
mount(ActionsDemo, '#demo-actions');

Dismissible Alert

Live Demo

const { Alert, Button, Div, mount } = window;

const DismissibleDemo = () => {
  const visible = $(true);
  
  return div({ class: 'flex flex-col gap-3' }, [
    () => visible() ? Alert({ class: 'alert-info flex justify-between items-center' }, [
      span({}, 'This alert can be dismissed. Click the X button to close.'),
      button({ class: 'btn btn-xs btn-circle btn-ghost', onclick: () => visible(false) }, '✕')
    ]) : null,
    () => !visible() ? button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
  ]);
};
mount(DismissibleDemo, '#demo-dismissible');

Reactive Alert

Live Demo

const { Alert, Div, Input, mount } = window;

const ReactiveDemo = () => {
  const email = $('');
  const error = $('');
  
  const validateEmail = (value) => {
    email(value);
    if (value && !value.includes('@')) {
      error('Please enter a valid email address');
    } else {
      error('');
    }
  };
  
  return div({ class: 'flex flex-col gap-4' }, [
    input({
      class: 'input input-bordered',
      placeholder: 'Enter your email',
      value: email,
      oninput: (e) => validateEmail(e.target.value)
    }),
    () => error() ? Alert({ class: 'alert-error' }, error()) : null,
    () => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
  ]);
};
mount(ReactiveDemo, '#demo-reactive');

All Types

Live Demo

const { Alert, Div, mount } = window;

const AllTypesDemo = () => {
  return div({ class: 'flex flex-col gap-3' }, [
    Alert({ class: 'alert-info' }, 'ℹ️ This is an info alert'),
    Alert({ class: 'alert-success' }, '✅ This is a success alert'),
    Alert({ class: 'alert-warning' }, '⚠️ This is a warning alert'),
    Alert({ class: 'alert-error' }, '❌ This is an error alert')
  ]);
};
mount(AllTypesDemo, '#demo-all');