Modal

Kodhus provides following types to be used within your web pages.

Dialog

Dialogs are usually used when you want to get a confirmation from user or want to show an important message that needs a high attention.

import { Dialog } from 'kodhus-ui-react';

<Dialog />

Let's take a look at an example:



Flexi Dialog (Full screen dialog)

Kodhus provides full screen modals or as we call it, flexi modals. you only need to provide .flexi class to the div with class .cdt-dialog.

Take a look at following example:

Alerts/Notifications

Alerts and notifications are visual feedbacks to the user based on an action. This action could be a click of a button or loading asyncronous data from backend.

Usage

To Use alerts/notifications, use the following snippet:

import { Notification } from 'kodhus-ui-react';

<Notification actionLabel='action'>Notification/Alert message here</Notification>

Note:

You can choose to do anything you want in place of the action. A link, a button and your own action of course.


Following is an example of how it looks:



Tip: If you don't add actionLabel prop, Kodhus React library will add a close icon that when clicked, it will close that notification. Take a look at the following example:




You can also add your own text instead of Kodhus close icon. You only need to add autoClose="true" as a prop to the Notification.