Alert

Alert component can be used to display alerts, notifications and other feedback messages to the user

You have earned a million dollars!

No. Just kidding.

Basic Usage

import React from 'react';
import { Alert } from 'chic-ui';

<>
  <Alert
    title="You have earned a million dollars!"
    message="No. Just kidding."
  />
</>;

Types of Alert

Use the type prop to specify the type of alert. Default type is primary

Title

Message

Title

Message

Title

Message

Title

Message

Title

Message

Title

Message

Title

Message

import React from 'react';
import { Alert } from 'chic-ui';

<>
<Alert title="Title" message="Message" type="primary" />
<Alert title="Title" message="Message" type="secondary" />
<Alert title="Title" message="Message" type="warning" />
<Alert title="Title" message="Message" type="success" />
<Alert title="Title" message="Message" type="danger" />
<Alert title="Title" message="Message" type="info" />
<Alert title="Title" message="Message" type="light" />
<>
</>;

Dismiss Alerts

An alert can be dismissed by setting dismissible prop to true. The onClose prop specifies a function that will be called when the alert is dismissed

Title

message

import { Alert } from 'chic-ui';
export function DismissAlerts(){
    const [show, setShow] = React.useState(true);
  
    const onClick = useCallback(() => {
      setShow((prev) => !prev);
    }, []);
  
    return (
      <Alert
        title={'Title'}
        message={'message'}
        dismissible
        type="primary"
        show={show}
        onClose={onClick}
      />
    );
  };

API

import { Alert } from 'chic-ui';

Name	Type	Default	Description
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Type of alert
title (required)	string		Title of the alert
message (required)	string		Message of the alert
dismissible	boolean	false	Boolean flag to allow dismissing the alert
show	boolean	true	Boolean flag to show the alert
onClose	function		Specify a function that will be called when the message is closed
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component