Alert

Usage

import { Alert } from 'nila';

Basic

“There is nothing in the world so irresistibly contagious as laughter and good humor.” ― Charles Dickens, A Christmas Carol

<Alert>I'm an Alert</Alert>

Bordered

“There is nothing in the world so irresistibly contagious as laughter and good humor.” ― Charles Dickens, A Christmas Carol

{/* Left Border */}
<Alert color="blue" className="border-l-4">...</Alert>
{/* Top Border */}
<Alert color="pink" className="border-t-4">...</Alert>

With Icon

“There is nothing in the world so irresistibly contagious as laughter and good humor.” ― Charles Dickens, A Christmas Carol

<Alert color="green" icon>
  <CheckCircleIcon className="flex-shrink-0 w-5 h-5" />
  <span>...</span>
</Alert>

With Close Button

“Suffering has been stronger than all other teaching, and has taught me to understand what your heart used to be. I have been bent and broken, but - I hope - into a better shape.” ― Charles Dickens

<Alert color="blue" icon closable>
  <CheckCircleIcon className="flex-shrink-0 w-5 h-5" />
  <span>...</span>
</Alert>

With Link

“You have been the last dream of my soul.” ― Charles Dickens, A Tale of Two CitiesWith a link

<Alert color="yellow" icon>
  <XCircleIcon className="flex-shrink-0 w-5 h-5" />
  <div className="flex flex-col justify-between w-full md:items-center md:flex-row">
    <span>...</span>
    <a href="#" className="mt-3 underline md:mt-0">With a link</a>
  </div>
</Alert>

Light Variant

“There is nothing in the world so irresistibly contagious as laughter and good humor.” ― Charles Dickens, A Christmas Carol

“You have been the last dream of my soul.” ― Charles Dickens, A Tale of Two Cities

“Never close your lips to those whom you have already opened your heart.” ― Charles Dickens

“There are books of which the backs and covers are by far the best parts.” ― Charles Dickens, Oliver Twist

“Have a heart that never hardens, and a temper that never tires, and a touch that never hurts.” ― Charles Dickens

“It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known.” ― Charles Dickens

“No one is useless in this world who lightens the burdens of another.” ― Charles Dickens

“And O there are days in this life, worth life and worth death.” ― Charles Dickens, Our Mutual Friend

<Alert>...</Alert>
<Alert color="red">...</Alert>
<Alert color="yellow">...</Alert>
<Alert color="green">...</Alert>
<Alert color="blue">...</Alert>
<Alert color="indigo">...</Alert>
<Alert color="purple">...</Alert>
<Alert color="pink">...</Alert>

Solid Variant