Composites & Sections · 9 Props

Alert

Notification box for user feedback, warnings, errors, and success messages. Supports tone-based coloring with optional title and icon.

Composites & Sections 9 Props

src/components/blocks/Alert.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
ariaLabel	string	—
attrs	any	—
class	string	""
html	string	—
icon	string	—
iconClass	string	h-5 w-5 shrink-0
role	string	status	"alert" \| "status"
text	string	—
title	string	—

Beispiele

Tones

info, success, warning, error.

Info

Hier steht ein informativer Hinweis.

Erfolg

Die Aktion wurde erfolgreich ausgeführt.

Warnung

Bitte überprüfe die Eingaben.

Fehler

Etwas ist schiefgelaufen.

{
  "type": "stack",
  "props": {
    "gap": "sm"
  },
  "blocks": [
    {
      "type": "alert",
      "props": {
        "tone": "info",
        "title": "Info",
        "text": "Hier steht ein informativer Hinweis."
      }
    },
    {
      "type": "alert",
      "props": {
        "tone": "success",
        "title": "Erfolg",
        "text": "Die Aktion wurde erfolgreich ausgeführt."
      }
    },
    {
      "type": "alert",
      "props": {
        "tone": "warning",
        "title": "Warnung",
        "text": "Bitte überprüfe die Eingaben."
      }
    },
    {
      "type": "alert",
      "props": {
        "tone": "error",
        "title": "Fehler",
        "text": "Etwas ist schiefgelaufen."
      }
    }
  ]
}

<Stack gap="sm">
  <Alert tone="info" title="Info" text="Hier steht ein informativer Hinweis." />
  <Alert tone="success" title="Erfolg" text="Die Aktion wurde erfolgreich ausgeführt." />
  <Alert tone="warning" title="Warnung" text="Bitte überprüfe die Eingaben." />
  <Alert tone="error" title="Fehler" text="Etwas ist schiefgelaufen." />
</Stack>