ConfirmationDialog

import React from 'react'
import {Button, ConfirmationDialog} from '@primer/react'


export default function Default() {
  const [open, setOpen] = React.useState(false)


  return (
    <>
      <Button onClick={() => setOpen(true)}>Enable product</Button>
      {open ? (
        <ConfirmationDialog
          onClose={() => setOpen(false)}
          title="Delete product"
          confirmButtonContent="Enable"
          cancelButtonContent="Cancel"
        >
          Are you sure you want to enable this product? This action cannot be undone.
        </ConfirmationDialog>
      ) : null}
    </>
  )
}

import React from 'react'
import {Button, ConfirmationDialog} from '@primer/react'


export default function CustomButtons() {
  const [open, setOpen] = React.useState(false)


  return (
    <>
      <Button onClick={() => setOpen(true)}>Enable product</Button>
      {open ? (
        <ConfirmationDialog
          onClose={() => setOpen(false)}
          title="Delete product"
          confirmButtonContent="Custom Delete"
          cancelButtonContent="Custom Cancel"
        >
          Are you sure you want to enable this product? This action cannot be undone.
        </ConfirmationDialog>
      ) : null}
    </>
  )
}

import React from 'react'
import {Button, ConfirmationDialog} from '@primer/react'


export default function Danger() {
  const [open, setOpen] = React.useState(false)


  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>
        Delete product
      </Button>
      {open ? (
        <ConfirmationDialog
          onClose={() => setOpen(false)}
          title="Delete product"
          confirmButtonContent="Delete"
          cancelButtonContent="Cancel"
          confirmButtonType="danger"
        >
          Are you sure you want to delete this product? This action cannot be undone.
        </ConfirmationDialog>
      ) : null}
    </>
  )
}

import React from 'react'
import {Button, ConfirmationDialog} from '@primer/react'


export default function Sizes() {
  const [open, setOpen] = React.useState(false)


  return (
    <>
      <Button onClick={() => setOpen(true)}>Enable product</Button>
      {open ? (
        <ConfirmationDialog
          onClose={() => setOpen(false)}
          title="Delete product"
          confirmButtonContent="Delete"
          cancelButtonContent="Cancel"
          width="large"
          height="auto"
        >
          Are you sure you want to enable this product? This action cannot be undone.
        </ConfirmationDialog>
      ) : null}
    </>
  )
}

import React, {useCallback} from 'react'
import {Button, useConfirm} from '@primer/react'


export default function UseConfirm() {
  const confirm = useConfirm()
  const onButtonClick = useCallback(
    async (event: React.MouseEvent) => {
      if (
        (await confirm({title: 'Are you sure?', content: 'Do you really want to turn this button green?'})) &&
        event.target instanceof HTMLElement
      ) {
        event.target.style.color = 'var(--fgColor-success)'
        event.target.textContent = "I'm green!"
      }
    },
    [confirm],
  )
  return (
    <div>
      <Button onClick={onButtonClick}>Turn me green!</Button>
    </div>
  )
}