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.

Preview

Whoa!

Something not great is happening.

Congrats!

Something great is happening!

Something is happening that isn't bad yet, but might be soon.

Attention:

Something is happening and you should know about it.

Source

<> <Alert status="error" title="Whoa!"> Something not great is happening. </Alert> <br /> <Alert status="success" title="Congrats!"> Something great is happening! </Alert> <br /> <Alert status="warning"> Something is happening that isn't bad yet, but might be soon. </Alert> <br /> <Alert status="info" title="Attention:"> Something is happening and you should know about it. </Alert> </>

<>
  <Alert status="error" title="Whoa!">
    Something not great is happening.
  </Alert>
  <br />
  <Alert status="success" title="Congrats!">
    Something great is happening!
  </Alert>
  <br />
  <Alert status="warning">
    Something is happening that isn't bad yet, but might be soon.
  </Alert>
  <br />
  <Alert status="info" title="Attention:">
    Something is happening and you should know about it.
  </Alert>
</>

Closeable Alert

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

Preview

Source

() => { const [open, setOpen] = React.useState(false); return ( <> <Button onClick={() => setOpen(true)}>Open Alert</Button> {open && ( <Alert status="error" title="Whoa!"> Something not great is happening! <Button bg="transparent" padding={1} border={0} name="Close Alert" marginLeft="auto" onClick={() => setOpen(false)} > <Icon name="x" size="20px" /> </Button> </Alert> )} </> ); }

() => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Alert</Button>
      {open && (
        <Alert status="error" title="Whoa!">
          Something not great is happening!
          <Button
            bg="transparent"
            padding={1}
            border={0}
            name="Close Alert"
            marginLeft="auto"
            onClick={() => setOpen(false)}
          >
            <Icon name="x" size="20px" />
          </Button>
        </Alert>
      )}
    </>
  );
}

Custom Colors / Icons

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

Preview

Alert!!!

Here is some information.

Source

<> <Alert icon="arrow-right-circle" bg="orange.200" title="Alert!!!" /> <br /> <Alert icon="circle" bg="green.100"> Here is some information. </Alert> </>

<>
  <Alert icon="arrow-right-circle" bg="orange.200" title="Alert!!!" />
  <br />
  <Alert icon="circle" bg="green.100">
    Here is some information.
  </Alert>
</>

Props

Props related to the Alert component.

Name	Type	Is Required	Default	Description
status	'error', 'success', 'warning', 'info'	optional	none	If status codes are supplied, the component will supply predefined colors and icons.
title	string	optional	none	Title for Alert
bg	string	optional	#e5e7eb	Sets the background color of the alert. Will override status
icon	string	optional	none	Icon for Alert