Alert

Displays a callout for user attention.

use lucide_yew::Terminal;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[function_component]
pub fn AlertDemo() -> Html {
    html! {
        <Alert>
            <Terminal class="h-4 w-4" />
            <AlertTitle>{"Heads up!"}</AlertTitle>
            <AlertDescription>
                {"You can add components to your app using the cli."}
            </AlertDescription>
        </Alert>
    }
}

use radix_yew_icons::RocketIcon;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[function_component]
pub fn AlertDemo() -> Html {
    html! {
        <Alert>
            <RocketIcon class="h-4 w-4" />
            <AlertTitle>{"Heads up!"}</AlertTitle>
            <AlertDescription>
                {"You can add components to your app using the cli."}
            </AlertDescription>
        </Alert>
    }
}

Installation

The CLI is not yet available. For now, manually copy the component source into your project.

rust-shadcn-ui add alert

View source

Usage

use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[component]
fn Usage() -> impl IntoView {
    view! {
        <Alert>
            <Terminal class="h-4 w-4" />
            <AlertTitle>{"Heads up!"}</AlertTitle>
            <AlertDescription>
                {"You can add components and dependencies to your app using the cli."}
            </AlertDescription>
        </Alert>
    }
}

Examples

Default

use lucide_yew::Terminal;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[function_component]
pub fn AlertDemo() -> Html {
    html! {
        <Alert>
            <Terminal class="h-4 w-4" />
            <AlertTitle>{"Heads up!"}</AlertTitle>
            <AlertDescription>
                {"You can add components to your app using the cli."}
            </AlertDescription>
        </Alert>
    }
}

use radix_yew_icons::RocketIcon;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[function_component]
pub fn AlertDemo() -> Html {
    html! {
        <Alert>
            <RocketIcon class="h-4 w-4" />
            <AlertTitle>{"Heads up!"}</AlertTitle>
            <AlertDescription>
                {"You can add components to your app using the cli."}
            </AlertDescription>
        </Alert>
    }
}

Destructive

use lucide_yew::CircleAlert;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle, AlertVariant};

#[function_component]
pub fn AlertDestructive() -> Html {
    html! {
        <Alert variant={AlertVariant::Destructive}>
            <CircleAlert class="h-4 w-4" />
            <AlertTitle>{"Error"}</AlertTitle>
            <AlertDescription>
                {"Your session has expired. Please log in again."}
            </AlertDescription>
        </Alert>
    }
}

use radix_yew_icons::ExclamationTriangleIcon;
use yew::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle, AlertVariant};

#[function_component]
pub fn AlertDestructive() -> Html {
    html! {
        <Alert variant={AlertVariant::Destructive}>
            <ExclamationTriangleIcon class="h-4 w-4" />
            <AlertTitle>{"Error"}</AlertTitle>
            <AlertDescription>
                {"Your session has expired. Please log in again."}
            </AlertDescription>
        </Alert>
    }
}

Rust shadcn/ui

Alert

Installation

Usage

Examples

Default

Destructive

See Also