Usage

import { Alert } from 'matterial'

function App() {
  return (
    <Alert severity="error" message="Something happened :(" />
    <Alert severity="warning" message="Danger!" action={<Button variant="contained" color="warning">Take me to safety</Button>} />
    <Alert severity="success" label="OK" message="Well done" />
    <Alert severity="info" action={<Link href="/">Do Lorem</Link>}>Velit laborum quis excepteur laboris commodo fugiat incididunt eiusmod cillum culpa sit id ipsum ex.</Alert>
    <Alert dismiss>Velit do velit est cillum reprehenderit cillum aliqua quis officia velit deserunt.</Alert>
  )
}

Examples

Colors

Icons

<Alert icon severity="error">Error</Alert>
<Alert icon severity="warning">Warning</Alert>
<Alert icon severity="success">Success</Alert>
<Alert icon severity="info">Info</Alert>
<Alert icon={<Icon icon="Notification" color="hotpink" />}>Custom</Alert>

useAlert Hook

A React Hook to access an alert state and component.

function App() {
  const [AlertComponent, setAlert] = useAlert()

  return (
    <AlertComponent />
    <button onClick={() => setAlert('Something happened')}>Alert</button>
    <button onClick={() => setAlert({ message:'Danger!', severity: 'warning' })}>Danger</button>
    <button onClick={() => setAlert(null)}>Reset</button>
  )
}