Alert

Alerts display small messages to the user in a view that stands out to draw attention.

You can use the Alert component for multiple purposes such as informing the user about a successful operation, warning the user about a potential issue, or notifying the user about an error.

Component

Basic Usage

This is a success alert

---
import { Alert } from "@gemini-ui-astro/components";
---

<Alert dynamicGlow severity="success">This is a success alert</Alert>

Different Severity Levels

This is a success alert

This is an error alert

This is an info alert

This is a warning alert

---
import { Alert } from "@gemini-ui-astro/components";
---

<Alert dynamicGlow severity="success">This is a success alert</Alert>
<Alert dynamicGlow severity="error">This is an error alert</Alert>
<Alert dynamicGlow severity="info">This is an info alert</Alert>
<Alert dynamicGlow severity="warning">This is a warning alert</Alert>

The Alert component supports four severity levels: success, error, info, and warning. Each severity level has a different color and pulse color to indicate the type of message.

Pulse Animation

This is a success alert with infinite pulse

---
import { Alert } from "@gemini-ui-astro/components";
---

<Alert dynamicGlow severity="success" pulse="infinite">
  This is a success alert with infinite pulse
</Alert>

The pulse is used to draw attention to the alert. It can be used to indicate that the alert is important or requires immediate attention.

Props

The Alert component has the following props.

Name	Type	Default	Description
dynamicGlow	boolean	false	A Gemini UI unique effect
pulse	”none” | “light” | “infinite”	light	Defines the extremity of the icons pulse animation
class	string	-	Override or extend the styles applied to the component.