A contextual notification component for displaying important messages. Alert uses the Panel core component as its surface layer, providing the same theming system — feedback colors, border styles, and radius control — while adding its own structured layout with an icon slot, optional title, optional actions, and a content area.
Alerts default to a neutral (primary) color palette and support semantic feedback colors: success, warning, and danger. Each feedback type automatically selects an appropriate icon.
---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
<Alert>
This is a general information alert. Use it to surface important context or
status updates to the user.
</Alert>
<Alert feedback="success">
Your changes have been saved successfully. The update is now live.
</Alert>
<Alert feedback="warning">
Your session is about to expire. Save your work to avoid losing any changes.
</Alert>
<Alert feedback="danger">
Unable to complete the request. Please check your connection and try again.
</Alert>
</div>The emphasis prop controls the visual weight of the outer container:
---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
<div>
<h3>Primary</h3>
<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
<Alert feedback="success" emphasis="primary">
Full-color outer container — the feedback color (500) fills the outer
ring with contrast text. The content area uses a tinted surface.
</Alert>
<Alert feedback="warning" emphasis="primary">
Full-color outer container — warning color fills the outer ring.
</Alert>
<Alert feedback="danger" emphasis="primary">
Full-color outer container — danger color fills the outer ring.
</Alert>
</div>
</div>
<div>
<h3>Secondary</h3>
<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
<Alert feedback="success" emphasis="secondary">
Neutral sunken outer container with a colored icon. Provides clear
feedback without a dominant colored background.
</Alert>
<Alert feedback="warning" emphasis="secondary">
Neutral sunken outer container with a warning-colored icon.
</Alert>
<Alert feedback="danger" emphasis="secondary">
Neutral sunken outer container with a danger-colored icon.
</Alert>
</div>
</div>
<div>
<h3>Tertiary</h3>
<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
<Alert feedback="success" emphasis="tertiary">
Neutral sunken container with a subtle content area. The icon uses a
neutral background with the feedback color as the icon tint.
</Alert>
<Alert feedback="warning" emphasis="tertiary">
Neutral sunken container with a warning-tinted icon on a neutral
background.
</Alert>
<Alert feedback="danger" emphasis="tertiary">
Neutral sunken container with a danger-tinted icon on a neutral
background.
</Alert>
</div>
</div>
</div>Alerts display a feedback-appropriate icon by default. Use noIcon to hide it when the content provides sufficient visual context.
---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
<Alert noIcon>
An alert without an icon. Useful when the content itself provides enough
visual context.
</Alert>
<Alert feedback="success" noIcon>
Operation completed. The icon is hidden — the feedback color alone conveys
the status.
</Alert>
<Alert feedback="warning" emphasis="secondary" noIcon>
Proceeding may have unintended side effects. Review before continuing.
</Alert>
<Alert feedback="danger" emphasis="tertiary" noIcon>
This action cannot be undone. All associated data will be permanently
deleted.
</Alert>
</div>The title prop and actions slot switch the header to column layout: the icon and title appear in a top row, followed by the content below. In Svelte, actions is a snippet; in Astro, use slot="actions".
---
import Alert from "../Alert.astro";
import Button from "@pindoba/astro-button";
import { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
<Alert title="Heads up">
Adding a title switches the layout to column mode — the header row contains
the icon and title, and the content appears below.
</Alert>
<Alert feedback="success" title="Changes saved">
<Button slot="actions" size="xs" shape="square" emphasis="ghost">
<Icon name="lucide:x" width={14} height={14} />
</Button>
Your profile has been updated and the changes are now live.
</Alert>
<Alert feedback="warning" emphasis="secondary" title="Session expiring">
<Button slot="actions" size="xs" feedback="warning" emphasis="secondary">
Extend
</Button>
<Button slot="actions" size="xs" shape="square" emphasis="ghost">
<Icon name="lucide:x" width={14} height={14} />
</Button>
Your session will expire in 5 minutes. Save your work or extend the session.
</Alert>
<Alert feedback="danger" emphasis="tertiary" title="Permission denied">
<Button slot="actions" size="xs" shape="square" emphasis="ghost">
<Icon name="lucide:x" width={14} height={14} />
</Button>
You do not have permission to perform this action. Contact your administrator
for access.
</Alert>
</div>The border, radius, and padding props are forwarded to Panel, enabling direct control over the outer container surface. The passThrough prop provides escape hatches for advanced customization: style accepts any Panda CSS SystemStyleObject applied to any slot, and props forwards arbitrary HTML attributes.
border="bold" and radius="md" to override the
default border and corner rounding.
padding="md" for a more compact outer container.
passThrough to constrain the width and italicize the content
text.
passThrough.root.props to add ARIA attributes for accessibility.
---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---
<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
<!-- Custom border and radius via Panel props -->
<Alert
feedback="success"
border="bold"
radius="md"
passThrough={{
content: {
style: css.raw({ borderRadius: "sm", borderTopLeftRadius: "2xs" }),
},
icon: {
style: css.raw({ borderRadius: "sm", borderTopRightRadius: "2xs" }),
},
}}
>
Using <code>border="bold"</code> and <code>radius="md"</code> to override the
default border and corner rounding.
</Alert>
<!-- Custom padding -->
<Alert feedback="warning" emphasis="secondary" padding="md">
Using <code>padding="md"</code> for a more compact outer container.
</Alert>
<!-- Custom styles via passThrough -->
<Alert
feedback="danger"
emphasis="tertiary"
passThrough={{
root: { style: { maxWidth: "480px" } },
content: { style: { fontStyle: "italic" } },
}}
>
Using <code>passThrough</code> to constrain the width and italicize the content
text.
</Alert>
<!-- ARIA attributes via passThrough props -->
<Alert
feedback="success"
emphasis="secondary"
passThrough={{
root: {
props: {
role: "status",
"aria-live": "polite",
"aria-label": "Status notification",
},
},
}}
>
Using <code>passThrough.root.props</code> to add ARIA attributes for accessibility.
</Alert>
</div>| Prop | |
|---|---|
feedback | |
emphasis | |
size | |
noIcon | |
border | |
radius | |
padding | |
translucent | |
title | |
actions | |
passThrough | |
...rest | |