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.

Copy
import { Alert } from 'minerva-ui';

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

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.
<>
  <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.

Open Alert
() => {
  const [open, setOpen] = 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] = 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.

Alert!!!

Here is some information.
<>
  <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#