Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

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

#[component]
pub fn AlertDialogExample() -> impl IntoView {
    view! {
        <AlertDialog>
            <AlertDialogTrigger>
                <Button variant="outline">"Show Dialog"</Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>"Are you absolutely sure?"</AlertDialogTitle>
                    <AlertDialogDescription>
                        "This action cannot be undone. This will permanently delete your
                        account from our servers."
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>
                        <Button>"Cancel"</Button>
                    </AlertDialogCancel>
                    <AlertDialogAction>
                        <Button>"Continue"</Button>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    }
}

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

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

#[component]
pub fn AlertDialogBasicExample() -> impl IntoView {
    view! {
        <AlertDialog>
            <AlertDialogTrigger>
                <Button variant="outline">"Show Dialog"</Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>"Are you absolutely sure?"</AlertDialogTitle>
                    <AlertDialogDescription>
                        "This action cannot be undone. This will permanently delete your
                        account and remove your data from our servers."
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>
                        <Button>"Cancel"</Button>
                    </AlertDialogCancel>
                    <AlertDialogAction>
                        <Button>"Continue"</Button>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    }
}

Small

Use the size prop to make the alert dialog smaller.

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

#[component]
pub fn AlertDialogSmallExample() -> impl IntoView {
    view! {
        <AlertDialog>
            <AlertDialogTrigger>
                <Button variant="outline">"Show Dialog"</Button>
            </AlertDialogTrigger>
            <AlertDialogContent size="sm">
                <AlertDialogHeader>
                    <AlertDialogTitle>"Allow accessory to connect?"</AlertDialogTitle>
                    <AlertDialogDescription>
                        "Do you want to allow the USB accessory to connect to this device?"
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>
                        <Button>"Don't allow"</Button>
                    </AlertDialogCancel>
                    <AlertDialogAction>
                        <Button>"Allow"</Button>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    }
}

Media

Use the DialogMedia component to add a media element such as an icon or image to the alert dialog.

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

#[component]
pub fn AlertDialogMediaExample() -> impl IntoView {
    view! {
        <AlertDialog>
            <AlertDialogTrigger>
                <Button variant="outline">"Share Project"</Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogMedia>{icon!(icondata::LuCircleFadingPlus)}</AlertDialogMedia>
                    <AlertDialogTitle>"Share this project?"</AlertDialogTitle>
                    <AlertDialogDescription>
                        "Anyone with the link will be able to view and edit this project."
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>
                        <Button>"Cancel"</Button>
                    </AlertDialogCancel>
                    <AlertDialogAction>
                        <Button>"Share"</Button>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    }
}

Small with Media

Use the size prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

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

#[component]
pub fn AlertDialogSmallWithMediaExample() -> impl IntoView {
    view! {
        <AlertDialog>
            <AlertDialogTrigger>
                <Button variant="outline">"Show Dialog"</Button>
            </AlertDialogTrigger>
            <AlertDialogContent size="sm">
                <AlertDialogHeader>
                    <AlertDialogMedia>{icon!(icondata::LuBluetooth)}</AlertDialogMedia>
                    <AlertDialogTitle>"Allow accessory to connect?"</AlertDialogTitle>
                    <AlertDialogDescription>
                        "Do you want to allow the USB accessory to connect to this device?"
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>
                        <Button>"Don't allow"</Button>
                    </AlertDialogCancel>
                    <AlertDialogAction>
                        <Button>"Allow"</Button>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    }
}

Destructive

Use the AlertDialogAction component to add a destructive action button to the alert dialog.

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

#[component]
pub fn AlertDialogDestructiveExample() -> impl IntoView {
    view! {
        <AlertDialog>
            <AlertDialogTrigger>
                <Button variant="destructive">"Delete Chat"</Button>
            </AlertDialogTrigger>
            <AlertDialogContent size="sm">
                <AlertDialogHeader>
                    <AlertDialogMedia variant="destructive">
                        {icon!(icondata::LuTrash2)}
                    </AlertDialogMedia>
                    <AlertDialogTitle>"Delete chat?"</AlertDialogTitle>
                    <AlertDialogDescription>
                        "This will permanently delete this chat conversation. View "
                        <a href="#">"Settings"</a>
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>
                        <Button variant="ghost">"Cancel"</Button>
                    </AlertDialogCancel>
                    <AlertDialogAction>
                        <Button variant="destructive">"Delete"</Button>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    }
}

Anatomy

Import all parts and piece them together.

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

#[component]
pub fn AlertDialogAnatomy -> impl IntoView {
    view!{
        <AlertDialog>
            <AlertDialogTrigger>
                <Button />
            </AlertDialogTrigger>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogMedia />
                    <AlertDialogTitle />
                    <AlertDialogDescription />
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel />
                    <AlertDialogAction />
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    }
}

API Reference

AlertDialog

Contains all the parts of a Dialog component.

Custom Attributes
Name	Type	Default	Description
open	bool	false	Reactive signal that can remotely control the open state of the popover but is not coupled to the actual open state of the popover

Implements global and dialog attributes.

AlertDialogAction

Wraps a button that the user presses to acknowledge the dialog.

Implements global attributes.

AlertDialogCancel

Wraps a button that the user presses to dismiss the dialog.

Implements global attributes.

AlertDialogContent

Contains content to be rendered in the main body of the dialog.

Custom Attributes
Name	Type	Default	Description
close_button	bool	false	Toggles whether or not a close button should appear in the top right corner of the dialog.
size	String	""	Set the size of dialog to render.

Implements global attributes.

AlertDialogDescription

A short description/subheading describing dialog content.

Implements global attributes.

AlertDialogFooter

Displays at the bottom of the dialog, contains calls to action.

Implements global attributes.

AlertDialogHeader

Contains the dialog title and a description to be rendered in the open dialog.

Implements global attributes.

AlertDialogMedia

Contains a media element such as an icon or image to render in the header of the dialog.

Custom Attributes
Name	Type	Default	Description
variant	String	""	Set the style variant of the media element. Accepted values: "destructive".

Implements global attributes.

AlertDialogTitle

A title describing dialog content.

Implements global attributes.

AlertDialogTrigger

Used to wrap other elements and trigger the dialog on click.

Note: the slot attribute is required.

Getting Started

Components

Alert Dialog

Are you absolutely sure?

Basic

Are you absolutely sure?

Small

Allow accessory to connect?

Media

Share this project?

Small with Media

Allow accessory to connect?

Destructive

Delete chat?

Anatomy

API Reference

AlertDialog

AlertDialogAction

AlertDialogCancel

AlertDialogContent

AlertDialogDescription

AlertDialogFooter

AlertDialogHeader

AlertDialogMedia

AlertDialogTitle

AlertDialogTrigger