Native Blocking Alert
<Alert
title="Native Alert"
body="This is a native blocking alert that exists in your browser."
show_alert={show_alert_state}
native=true
/>Top Right - Error With Confirmation
<Alert
title="Error Alert"
body="This is an error alert in the top-right corner."
show_alert={show_alert_state}
position={Position::TopRight}
icon_type={IconType::Error}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
on_confirm={Callback::from(move |_| { show_second_alert.set(true); })}
/>Bottom Left - Success
<Alert
title="Success Alert"
body="This is a success alert in the bottom-left corner."
show_alert={show_alert_state}
position={Position::BottomLeft}
icon_type={IconType::Success}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Bottom Right - Info
<Alert
title="Info Alert"
body="This is an info alert in the bottom-right corner."
show_alert={show_alert_state}
position={Position::BottomRight}
icon_type={IconType::Info}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Top Left - Error
<Alert
title="Error Alert"
body="This is an error alert in the top-left corner."
show_alert={show_alert_state}
position={Position::TopLeft}
icon_type={IconType::Error}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Top Right - Success
<Alert
title="Success Alert"
body="This is a success alert in the top-right corner."
show_alert={show_alert_state}
position={Position::TopRight}
icon_type={IconType::Success}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Left Center - Info
<Alert
title="Info Alert"
body="This is an info alert in the bottom-left corner."
show_alert={show_alert_state}
position={Position::LeftCenter}
icon_type={IconType::Info}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Right Center - Warning
<Alert
title="Warning Alert"
body="This is a warning alert in the bottom-right corner."
show_alert={show_alert_state}
position={Position::RightCenter}
icon_type={IconType::Warning}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Top Center - Info
<Alert
title="Info Alert"
body="This is an info alert in the top-center."
show_alert={show_alert_state}
position={Position::TopCenter}
icon_type={IconType::Info}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Center - Success
<Alert
title="Success Alert"
body="This is a success alert in the top-left corner."
show_alert={show_alert_state}
position={Position::Center}
icon_type={IconType::Success}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Bottom Center - Warning
<Alert
title="Warning Alert"
body="This is a warning alert in the bottom-center."
show_alert={show_alert_state}
position={Position::BottomCenter}
icon_type={IconType::Warning}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>Bottom Right - Success
<Alert
title="Success Alert"
body="This is a success alert in the bottom-right corner."
show_alert={show_alert_state}
position={Position::BottomRight}
icon_type={IconType::Success}
alert_class="text-center w-96 h-48 bg-white text-black rounded-md shadow-lg p-4"
title_class="text-sm font-semibold"
body_class="text-xs"
/>