Alert

Preview

🤙

You are awesome!

You successfully created a new post..

Check it out

🛟

Hurry up!

Your attention is needed

Fix it

🚨

Danger

Destructive

Confirm

Code

---
import Alert from "{{ aliases.components }}/Alert.astro";
import Button from "{{ aliases.components }}/Button.astro";
---

<Alert intent="success" class="not-content">
  <span slot="icon">🤙</span>
  <h6>You are awesome!</h6>
  <p slot="description">You successfully created a new post..</p>
  <Button slot="action" intent="success">Check it out</Button>
</Alert>

Install

npx ui-gen add alert

---

Properties

intent string

type: string

options: primary, secondary, success, warning, danger, info, ghost

default: ghost

size

type: string

options: small, medium, large

default: medium

roundness

type: string

options: small, medium, large

default: medium