Alert

An alert component. Used to display important messages and notifications to users.

Usage

'Read the “', Usage, '” section'

Preview

Alert Component Test

This is a basic alert component test.

Code

AlertExample.astro

---
import { Alert } from 'studiocms:ui/components/alert';
---
<Alert title="Alert Component Test">
  This is a basic alert component test.
</Alert>

Variants

'Read the “', Variants, '” section'

The alert component supports multiple variants to convey different types of messages:

• default (Default)
• primary
• success
• danger
• info
• warning
• mono

They can be used via the variant prop on the alert component.

Preview

Default Alert

This is a default alert message.

Primary Alert

This is a primary alert message.

Success Alert

This is a success alert message.

Danger Alert

This is a danger alert message.

Info Alert

This is an info alert message.

Warning Alert

This is a warning alert message.

Monochrome Alert

This is a monochrome alert message.

Code

AlertVariantExample.astro

---
import { Alert } from 'studiocms:ui/components/alert';
---
<Alert title="Default Alert" variant="default">
  This is a default alert message.
</Alert>

<Alert title="Primary Alert" variant="primary">
  This is a primary alert message.
</Alert>

<Alert title="Success Alert" variant="success">
  This is a success alert message.
</Alert>

<Alert title="Danger Alert" variant="danger">
  This is a danger alert message.
</Alert>

<Alert title="Info Alert" variant="info">
  This is an info alert message.
</Alert>

<Alert title="Warning Alert" variant="warning">
  This is a warning alert message.
</Alert>

<Alert title="Monochrome Alert" variant="mono">
  This is a monochrome alert message.
</Alert>

Custom Icons

'Read the “', Custom Icons, '” section'

You can customize the icon displayed in the alert using the icon prop:

Preview

Danger Alert

This is a danger alert message with a custom icon.

Code

AlertIconExample.astro

---
import { Alert } from 'studiocms:ui/components/alert';
---
<Alert title="Danger Alert" variant="danger" icon="heroicons:academic-cap">
  This is a danger alert message with a custom icon.
</Alert>