Component reference
Alert
A message about the page or a task, in one of the status tones.
Preview
Outcome and next step
Color conveys semantics; the announced urgency is set independently with role. These are all local demo messages.
render: () => (
<Measure width="content">
<Stack>
<Alert title="Saved on this device only">
The current draft has not been published yet; you can keep editing.
</Alert>
<Alert layout="bar" tone="neutral" marker="none">
Kept locally. Nothing is waiting on you.
</Alert>
<Alert
layout="bar"
tone="warning"
actions={
<Button variant="quiet" size="small">
View receipt
</Button>
}
>
Last submission unverified; draft kept.
</Alert>
<Alert title="Draft saved" tone="success">
You can continue editing the next time you open it.
</Alert>
<Alert title="Connection temporarily interrupted" tone="warning">
Your input has been kept; you can send it after the connection recovers.
</Alert>
<Alert title="File could not be read" tone="danger" role="alert">
The file may have moved. Select the file again and try again.
</Alert>
</Stack>
</Measure>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { Alert } from "meowtail";
<Alert title="Saved on this device only">
The current draft has not been published yet; you can keep editing.
</Alert>API reference
Urgency is explicit, independent of the visual tone.
Props
| Prop | Type | Default |
|---|---|---|
tone | "neutral" | "info" | "success" | "warning" | "danger" | "info" |
layout | "block" | "bar" | "block" |
marker | "dot" | "none" | "dot" |
title | Child | – |
role | "status" | "alert" | "status" |
actions | Child | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
roottitlebodyactions
Registry
The component is registered as alert in the meowtail component registry.