Alert

import Alert from 'frui/Alert';

Copy

Props

Name	Type	Required	Notes
className	string	No	Standard HTML class names
color	string	No	Custom CSS hex or name
curved	boolean	No	Slight curved corners
error	boolean	No	Red alert
info	boolean	No	Blue alert
muted	boolean	No	Gray alert
outline	boolean	No	Border and text with color
pill	boolean	No	Max rounded corners
rounded	boolean	No	Rounded corners
solid	boolean	No	Fills alert with color
style	CSS Object	No	Standard CSS input
success	boolean	No	Green alert
warning	boolean	No	Orange alert

Alerts have the following types: info, warning, success, error, and muted.

No results found

<Alert info className="flex items-center">
  <i className="fas fa-info-circle mr-2"></i>
  No results found
</Alert>

Copy

Are you sure ?

<Alert warning className="flex items-center">
  <i className="fas fa-exclamation-triangle mr-2"></i>
  Are you sure ?
</Alert>

Copy

Successfully saved !

<Alert success className="flex items-center">
  <i className="fas fa-check-circle mr-2"></i>
  Successfully saved !
</Alert>

Copy

Could not save

<Alert error className="flex items-center">
  <i className="fas fa-exclamation-circle mr-2"></i>
  Could not save
</Alert>

Copy

I am disabled

<Alert muted className="flex items-center">
  I am disabled
</Alert>

Copy

Alerts can have custom CSS compatible colors which includes hex and color names.

Who likes salmon?

<Alert color="salmon" className="flex items-center">
  <i className="fas fa-info-circle mr-2"></i>
  Who likes salmon?
</Alert>

Copy

Alerts can be rounded in three ways: curved, rounded, and pill.

No results found

<Alert info curved className="flex items-center">
  <i className="fas fa-info-circle mr-2"></i>
  No results found
</Alert>

Copy

Are you sure ?

<Alert warning rounded className="flex items-center">
  <i className="fas fa-exclamation-triangle mr-2"></i>
  Are you sure ?
</Alert>

Copy

Successfully saved !

<Alert success pill className="flex items-center">
  <i className="fas fa-check-circle mr-2"></i>
  Successfully saved !
</Alert>

Copy

You can add your own custom class to the alert component or use the frui-alert CSS class.