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
type	string	'info'	Alert type: 'info', 'success', 'warning', 'error'
soft	boolean | Signal<boolean>	true	Use soft variant (subtle background)
actions	VNode | function	-	Optional action buttons or content
message	string | VNode | Signal	-	Alert message content
class	string	''	Additional CSS classes (DaisyUI + Tailwind)
children	string | VNode	-	Alert content (alternative to message)

Styling

Alert supports all daisyUI Alert classes:

Category	Keywords	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.

Example

Alert({ 
  type: "success", 
  soft: false,
  class: "shadow-lg",
  message: "Operation completed!"
});
// Applies: solid success alert with shadow

Live Examples

Basic Alerts

Live Demo

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

Soft vs Solid Variants

Live Demo

const VariantsDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Alert({ type: 'info', soft: true, message: 'Soft info alert (default)' }),
    Alert({ type: 'info', soft: false, message: 'Solid info alert' }),
    Alert({ type: 'success', soft: true, message: 'Soft success alert' }),
    Alert({ type: 'success', soft: false, message: 'Solid success alert' })
  ]);
};
$mount(VariantsDemo, '#demo-variants');

With Actions

Live Demo

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({
      type: 'warning',
      soft: true,
      message: `Deleted: ${deletedItem()}`,
      actions: Button({ 
        class: 'btn btn-sm btn-primary',
        onclick: undoDelete
      }, 'Undo')
    }) : null
  ]);
};
$mount(ActionsDemo, '#demo-actions');

Dismissible Alert

Live Demo

const DismissibleDemo = () => {
  const visible = $(true);
  
  return Div({ class: 'flex flex-col gap-3' }, [
    () => visible() ? Alert({
      type: 'info',
      message: 'This alert can be dismissed. Click the X button to close.',
      actions: 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 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({
      label: 'Email Address',
      placeholder: 'Enter your email',
      value: email,
      oninput: (e) => validateEmail(e.target.value)
    }),
    () => error() ? Alert({ type: 'error', message: error() }) : null,
    () => email() && !error() ? Alert({ 
      type: 'success', 
      message: `Valid email: ${email()}` 
    }) : null
  ]);
};
$mount(ReactiveDemo, '#demo-reactive');

Form Validation

Live Demo

const FormDemo = () => {
  const name = $('');
  const email = $('');
  const submitted = $(false);
  const errors = $({ name: '', email: '' });
  
  const validate = () => {
    const newErrors = {
      name: name().trim() ? '' : 'Name is required',
      email: email().trim() ? (email().includes('@') ? '' : 'Invalid email') : 'Email is required'
    };
    errors(newErrors);
    return !newErrors.name && !newErrors.email;
  };
  
  const handleSubmit = () => {
    if (validate()) {
      submitted(true);
      setTimeout(() => submitted(false), 3000);
      Toast('Form submitted successfully!', 'alert-success', 2000);
    }
  };
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'text-lg font-bold' }, 'Contact Form'),
    Input({
      label: 'Name',
      value: name,
      error: () => errors().name,
      oninput: (e) => {
        name(e.target.value);
        validate();
      }
    }),
    Input({
      label: 'Email',
      value: email,
      error: () => errors().email,
      oninput: (e) => {
        email(e.target.value);
        validate();
      }
    }),
    Button({ class: 'btn btn-primary', onclick: handleSubmit }, 'Submit'),
    () => submitted() ? Alert({ 
      type: 'success', 
      message: 'Thank you! We will contact you soon.' 
    }) : null,
    () => (errors().name || errors().email) ? Alert({ 
      type: 'error', 
      message: 'Please fix the errors above before submitting.' 
    }) : null
  ]);
};
$mount(FormDemo, '#demo-form');

Icon Alerts

Live Demo

const IconsDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Alert({ type: 'info', message: 'Information alert with custom icon' }),
    Alert({ type: 'success', message: 'Success alert with custom icon' }),
    Alert({ type: 'warning', message: 'Warning alert with custom icon' }),
    Alert({ type: 'error', message: 'Error alert with custom icon' })
  ]);
};
$mount(IconsDemo, '#demo-icons');

All Types

Live Demo

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