Alerts

Alert components for displaying success, error, warning, and info messages

Auto-Dismiss Script

Success Alert

---

source

create_success_alert

 create_success_alert (message:str, timeout_ms:int=3000)

Create a success alert that auto-dismisses.

	Type	Default	Details
message	str		The success message to display
timeout_ms	int	3000	Time in milliseconds before auto-dismiss
Returns	FT		Div element containing the success alert

# Example: Create a success alert
create_success_alert("Configuration saved successfully!")

<div id="alert-container">
  <div class="alert alert-success shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-success-content"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Configuration saved successfully!</span>  </div>
<script>
        // Clear any existing timeout
        if (window.alertTimeout) {
            clearTimeout(window.alertTimeout);
            clearTimeout(window.alertFadeTimeout);
        }

        // Remove any existing alert immediately
        var existingAlert = document.getElementById('alert-container');
        if (existingAlert && existingAlert !== document.currentScript.parentElement) {
            existingAlert.remove();
        }

        // Set new timeout for this alert
        window.alertTimeout = setTimeout(function() {
            var alertEl = document.getElementById('alert-container');
            if (alertEl) {
                alertEl.style.transition = 'opacity 0.5s';
                alertEl.style.opacity = '0';
                window.alertFadeTimeout = setTimeout(function() {
                    if (alertEl) {
                        alertEl.remove();
                    }
                }, 500);
            }
        }, 3000);
    </script></div>

Error Alert

---

source

create_error_alert

 create_error_alert (message:str, details:Optional[str]=None)

Create an error alert with optional details.

	Type	Default	Details
message	str		The error message to display
details	Optional	None	Optional additional details text
Returns	FT		Div element containing the error alert

# Example: Create an error alert
create_error_alert("Failed to save configuration", "Invalid port number")

<div id="alert-container">
  <div class="alert alert-error shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-error-content"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Failed to save configuration</span><span class="text-sm text-base-content/60">Invalid port number</span>  </div>
</div>

Warning Alert

---

source

create_warning_alert

 create_warning_alert (message:str, details:Optional[str]=None)

Create a warning alert with optional details.

	Type	Default	Details
message	str		The warning message to display
details	Optional	None	Optional additional details text
Returns	functools.partial(<function ft_hx at 0x7f69bcc8f1a0>, ‘div’)		Div element containing the warning alert

# Example: Create a warning alert
create_warning_alert("Configuration incomplete", "Some optional fields are empty")

<div id="alert-container">
  <div class="alert alert-warning shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-warning-content"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Configuration incomplete</span><span class="text-sm text-base-content/60">Some optional fields are empty</span>  </div>
</div>

Info Alert

---

source

create_info_alert

 create_info_alert (message:str, details:Optional[str]=None)

Create an info alert with optional details.

	Type	Default	Details
message	str		The info message to display
details	Optional	None	Optional additional details text
Returns	FT		Div element containing the info alert

# Example: Create an info alert
create_info_alert("New feature available", "Check out the updated settings page")

<div id="alert-container">
  <div class="alert alert-info shadow-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-6 h-6 stroke-info-content"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>New feature available</span><span class="text-sm text-base-content/60">Check out the updated settings page</span>  </div>
</div>