Alert

Alert dialogs interrupt users with urgent information, details, or actions.

Most alerts don't need titles. They summarize a decision in a sentence or two by either:

• Asking a question (e.g. "Delete this conversation?")
• Making a statement related to the action buttons

Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone.

If a title is required:

• Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?".
• Avoid apologies, ambiguity, or questions, such as "Warning!" or "Are you sure?"

Example

Use Google's location service ?

Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.

import { Alert , RepopupProvider } from 'repopup'
import  { useState } from 'react';
import ReactDOM from 'react-dom';

export function App() {

  const [open,setOpen] = useState(false)
  
  return <>
        <Button onClick={() => setOpen(true)}>Open Input</Button>
        <Alert
          open={open}
          onClose={() => setOpen(false)}
          title={`Use Google's location service ?`}
          subtitle={`Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.`}
          variant="question"
          onConfirm={() => setOpen(false)}
          onDeny={() => setOpen(false)}
          confirmButtonText="Agree"
          denyButtonText="Disagree"
              />
  </>
}

ReactDOM.render(
   <RepopupProvider>
    <App />
</RepopupProvider>, 
,document.querySelector('#app'));

Variants

The Alert comes with five different variants:

• ✅ success
• ℹ️ info
• ❔ question
• ☠️ error
• ⚠️ warning

Success

Error

Warning

Info

Question

    <Alert
        open={open1}
        onClose={() => setOpen1(false)}
        title={`Success`}
        variant="success"
    />
      <Alert
        open={open2}
        onClose={() => setOpen2(false)}
        title={`Error`}
        variant="error"
    />
    <Alert
        open={open3}
        onClose={() => setOpen3(false)}
        title={`Warning`}
        variant="warning"
    />
      <Alert
        open={open4}
        onClose={() => setOpen4(false)}
        title={`Info`}
        variant="info"
    />
      <Alert
        open={open5}
        onClose={() => setOpen5(false)}
        title={`Question`}
        variant="question"
    />

API

• <Alert/>
• useAlert