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.

CSS API

This is a success alert

This is a error alert

This is a info alert

This is a warning alert

---
import "@gemini-ui-css/components/alert.css";
---

<section
  class="gx-alert gx-alert-severity-success gx-alert-pulse-light gx-dynamic-glow"
>
  <div class="gx-alert-pulse"></div>
  <div class="gx-alert-message">This is a success alert</div>
</section>
<section
  class="gx-alert gx-alert-severity-error gx-alert-pulse-light gx-dynamic-glow"
>
  <div class="gx-alert-pulse"></div>
  <div class="gx-alert-message">This is a error alert</div>
</section>
<section
  class="gx-alert gx-alert-severity-info gx-alert-pulse-light gx-dynamic-glow"
>
  <div class="gx-alert-pulse"></div>
  <div class="gx-alert-message">This is a info alert</div>
</section>
<section
  class="gx-alert gx-alert-severity-warning gx-alert-pulse-light gx-dynamic-glow"
>
  <div class="gx-alert-pulse"></div>
  <div class="gx-alert-message">This is a warning alert</div>
</section>