Modals

HTML Layout

<div class="modal">
  <div class="text">
    <h2>Woah there! Are you sure you want to nuke that country?</h2>
    <p>In the event of total atomic annihilation, we can't save you, because we'll have to pretend we don't know you.</p>
  </div>
  <div class="buttons">
    <a href="#" class="button mono">
      Nevermind
    </a>
    <a href="#" class="button error">
      Delete that nation.
    </a>
  </div>
</div>

Supported statuses: Success, warning, error, info. Okay to omit.

React Layout

import { Modal, Button } from '@cupid-ui/react';

// [...]

<Modal
  title="Woah there! Are you sure you want to nuke that country?"
  subtext="In the event of total atomic annihilation, we can't save you, because we'll have to pretend we don't know you."
>
  <Button
    title="Nevermind"
    type="mono"
  />
  <Button
    title="Delete that nation"
    type="error"
  />
</Modal>

Parameters

Preview

More info