Tuimorphic

Alert

Display important messages with terminal styling and variant-based color coding.

Import

import { Alert } from 'tuimorphic';

Usage

The Alert component displays important messages with solid single-line borders and variant-based color coding for different severity levels.

<Alert>Default alert message</Alert>

Props

PropTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'error' | 'info''default'Visual variant indicating alert severity
titleReact.ReactNode-Optional title displayed in the alert header
childrenReact.ReactNode-Alert message content
dismissiblebooleanfalseWhether to show a dismiss button
onDismiss() => void-Callback when the alert is dismissed
classNamestring-Additional CSS class names

Variants

Severity Variants

<Alert variant="default">Default alert message</Alert>
<Alert variant="success">Operation completed successfully.</Alert>
<Alert variant="warning">Please review before proceeding.</Alert>
<Alert variant="error">An error occurred.</Alert>
<Alert variant="info">Here is some helpful information.</Alert>

With Title

<Alert variant="success" title="Success">
  Operation completed successfully.
</Alert>
 
<Alert variant="error" title="Error">
  An error occurred while processing your request.
</Alert>

Dismissible

const [visible, setVisible] = useState(true);
 
{visible && (
  <Alert
    variant="warning"
    title="Warning"
    dismissible
    onDismiss={() => setVisible(false)}
  >
    This alert can be dismissed.
  </Alert>
)}

Previous

Tooltip

Next

Message

On this page