Alert

The Alert component provides a Windows 98-style alert box for displaying important messages or notifications to users.

Import

import { Alert } from 'rohit-ui';

Examples

Basic Alert

Alert

This is an important message.

// Basic alert
<Alert type="info">
  This is an informational alert.
</Alert>

Alert with Custom Icon

⚠️Warning

This action cannot be undone.

// Alert with custom icon
<Alert 
  type="warning"
  icon="⚠️"
>
  This is a warning with a custom icon.
</Alert>

Rohit Mode Alert

🎉UNNECESSARILY COMPLICATED

This alert is unnecessarily complicated.

// Rohit Mode alert
<Alert 
  type="error"
  rohitMode
>
  This alert is unnecessarily dramatic!
</Alert>

Note: In Rohit Mode, the alert will wiggle, change color, and sometimes randomly reposition itself.

Props

Name	Type	Default	Description
title	string	'Alert'	Title text displayed in the alert header
message	string	-	Message text displayed in the alert body
icon	string	-	Icon to display in the alert header
open	boolean	false	Whether the alert is visible
onClose	function	-	Function called when the alert is closed
buttons	Array<{text: string, onClick: function}>	[{text: 'OK'}]	Custom buttons to display in the alert
className	string	-	CSS class to apply to the alert container
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Alert component using styled-components:

import styled from 'styled-components';
import { Alert } from 'rohit-ui';

const CustomAlert = styled(Alert)`
  background: #f0f0f0;
  .alert-header {
    background: purple;
    color: white;
  }
  .alert-content {
    padding: 20px;
  }
`;

function MyComponent() {
  return (
    <CustomAlert
      title="Custom Alert"
      message="Custom styled alert message."
      open={isOpen}
      onClose={() => setIsOpen(false)}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Alert component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly reposition itself
Draw unnecessary attention to itself