Display important messages with different severity levels using ASCII-style icons.
npm install react-ascii-ui
import { AsciiAlert } from 'react-ascii-ui';
export default function Example() {
return (
<AsciiAlert variant="info" title="Information">
This is an informational alert message.
</AsciiAlert>
);
}<AsciiAlert variant="info">Info alert</AsciiAlert> <AsciiAlert variant="success">Success alert</AsciiAlert> <AsciiAlert variant="warning">Warning alert</AsciiAlert> <AsciiAlert variant="error">Error alert</AsciiAlert>
<AsciiAlert variant="warning" title="Important Notice"> Please read the documentation before proceeding. </AsciiAlert>
Please fix the following issues:
<AsciiAlert variant="error" title="Validation Error">
<div>
<p>Please fix the following issues:</p>
<ul>
<li>Email is required</li>
<li>Password must be at least 8 characters</li>
</ul>
</div>
</AsciiAlert>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'info' | 'success' | 'warning' | 'error' | 'info' | The visual style and icon of the alert |
| title | string | - | Optional title displayed in bold above content |
| children | React.ReactNode | - | The main content of the alert |
| className | string | "" | Additional CSS classes |
AsciiAlert extends all HTML div attributes and React.HTMLAttributes.