docs menuinfo success error dismissible
Alert
A short message block for a success, an error or information, with an optional dismiss button.
import { Alert } from "@meowerse/ui"; · source packages/ui/src/components/Alert.tsx
variants and states
your recovery codes were replaced. the old ones no longer work.
saved.
wrong password — try again or reset it.
you can revoke an app's access any time.
props
| prop | type | default | required |
|---|---|---|---|
variant | "error" | "success" | "info" the tone of the message; error renders role="alert", the rest role="status". | "info" | no |
onDismiss | () => void shows a dismiss button and calls this when it's pressed. | — | no |
children | ReactNode the message itself. | — | yes |
className | string extra class names to append. | — | no |
css custom properties
| variable | dark | light |
|---|---|---|
--c-danger | #ff6b63 | #b42318 |
--c-danger-tint | #2a1513 | #f6dcd8 |
--c-fg-muted | #b3b3af | #46464a |
--c-line-strong | #404044 | #a9a8a2 |
--c-ok | #3ddc84 | #11652f |
--c-surface | #151517 | #dfded9 |
--fs-3 | 0.875rem | same |
--r-m | 4px | same |
--sp-2 | 8px | same |
--sp-3 | 12px | same |
Classes: .mw-alert. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
info
import { Alert } from "@meowerse/ui";
<Alert>your recovery codes were replaced. the old ones no longer work.</Alert><div role="status" class="mw-alert mw-alert--info"><svg class="mw-icon mw-alert__icon" data-icon="info-circle" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg><span class="mw-alert__body">your recovery codes were replaced. the old ones no longer work.</span></div>success
import { Alert } from "@meowerse/ui";
<Alert variant="success">saved.</Alert><div role="status" class="mw-alert mw-alert--success"><svg class="mw-icon mw-alert__icon" data-icon="circle-check" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M9 12l2 2l4 -4"></path></svg><span class="mw-alert__body">saved.</span></div>error
import { Alert } from "@meowerse/ui";
<Alert variant="error">wrong password — try again or reset it.</Alert><div role="alert" class="mw-alert mw-alert--error"><svg class="mw-icon mw-alert__icon" data-icon="alert-triangle" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0"></path><path d="M12 16h.01"></path></svg><span class="mw-alert__body">wrong password — try again or reset it.</span></div>dismissible
import { Alert } from "@meowerse/ui";
<Alert variant="info" onDismiss={handleDismiss}>you can revoke an app's access any time.</Alert>accessibility
- Errors render with role="alert", so screen readers announce them at once; the other variants use role="status".
- The icon is decorative: the words carry the meaning, never the colour alone.
- The dismiss button is 44×44 px and is named "dismiss".
| key | does |
|---|---|
| Tab | reaches the dismiss button |
| Enter or Space | dismisses the alert |
do and don't
do
- Say what happened and what to do next: "wrong password — try again or reset it".
- Put the alert next to what it is about.
don't
- Don't show a code on its own, like "Error 401".
- Don't use an alert for a passing success; use a toast.