Alert

Displays a callout for user attention.

Success! Your changes have been saved

This is an alert with icon, title and description.

use leptos::prelude::*;
use singlestage::{alert::*, icon};

#[component]
pub fn AlertExample() -> impl IntoView {
    view! {
        <Alert>
            {icon!(icondata::LuCircleCheck)}
            <AlertTitle>"Success! Your changes have been saved"</AlertTitle>
            <AlertDescription>
                "This is an alert with icon, title and description."
            </AlertDescription>
        </Alert>
    }
}

Destructive

Alerts have a destructive themed variant.

Something went wrong!

Your session has expired. Please log in again.

use leptos::prelude::*;
use singlestage::{alert::*, icon};

#[component]
pub fn AlertDestructiveExample() -> impl IntoView {
    view! {
        <Alert variant="destructive">
            {icon!(icondata::FiAlertCircle)} <AlertTitle>"Something went wrong!"</AlertTitle>
            <AlertDescription>"Your session has expired. Please log in again."</AlertDescription>
        </Alert>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::alert::*;

#[component]
pub fn AlertAnatomy() -> impl IntoView {
    view! {
        <Alert>
            <AlertTitle />
            <AlertDescription />
        </Alert>
    }
}

API Reference

Alert

Contains the contents of the alert.

Custom Attributes
Name	Type	Default	Description
variant	String	"alert"	Specifies the style of alert to display.

Implements global attributes.

AlertDescription

Contains the description of the alert.

Implements global attributes.

AlertTitle

Contains the title of the alert.

Implements global attributes.