Prism Docs

import { Alert, Button } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function BasicExample(): React.ReactElement {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Alert</Button>

      <Alert onOpenChange={setOpen} open={open}>
        <Alert.Illustration name="100x100_info" />
        <Alert.Title>This is an alert title</Alert.Title>
        <Alert.Text>This is the alert text providing more details.</Alert.Text>
        <Alert.Footer>
          <Alert.Button onClick={() => setOpen(false)} type="secondary">
            Cancel
          </Alert.Button>
          <Alert.Button onClick={() => setOpen(false)} type="primary">
            Confirm
          </Alert.Button>
        </Alert.Footer>
      </Alert>
    </>
  );
}