Alert

The <Alert /> component provides feedback to the user that something has happened.

It has the attribute role="alert", which means that when the component is rendered its content will also be read aloud to users with screen readers.

The Alert component includes predefined status codes and customizable colors and icons.

import { Alert } from 'minerva-ui';

If status codes are supplied, the component will supply predefined colors and icons.




Closeable Alert

You can supply a prop of canBeClosed to allow an Alert to display and hide.

Custom Colors / Icons

You can also supply your own colors and icons. The default theme includes Feather Icons.


Props

NameTypeIs RequiredDefaultDescription
status'error', 'success', 'warning', 'info'optionalnoneIf status codes are supplied, the component will supply predefined colors and icons.
titlestringoptionalnoneTitle for Alert
bgstringoptional#e5e7ebSets the background color of the alert. Will override status
iconstringoptionalnoneIcon for Alert