import { Meta, ArgTypes } from '@storybook/blocks';
import { ConfirmButton } from './ConfirmButton';

<Meta title="MDX|ConfirmButton" component={ConfirmButton} />

# ConfirmButton

The ConfirmButton is an interactive component that adds a double-confirm option to a clickable action. When clicked, the action is replaced by an inline confirmation with the option to cancel. In Grafana, this is used, for example, for editing values in settings tables.

## Variants

There are four variants of the `ConfirmButton`: primary, secondary, destructive, and link. The primary and secondary variants include a primary or secondary `Button` component. The primary and secondary variant should be used to confirm actions like saving or adding data. The destructive variant includes a destructive `Button` component. The destructive variant should be used to double-confirm a deletion or removal of an element. The link variant doesn't include any button and double-confirms as links instead.

Apart from the button variant, you can also modify the button size and the button text.

## Usage

```jsx
<ConfirmButton
  closeOnConfirm
  size="md"
  confirmText="Are you sure?"
  confirmVariant="secondary"
  onConfirm={() => {
    console.log('Action confirmed!');
  }}
>
  Click me
</ConfirmButton>
```

## With a custom button

You can pass a custom button as a child to the `ConfirmButton`. The child will automatically receive the correct `onClick` from `ConfirmButton`.

```jsx
<ConfirmButton
  closeOnConfirm
  size="md"
  confirmText="Are you sure?"
  confirmVariant="secondary"
  onConfirm={() => {
    console.log('Action confirmed!');
  }}
>
  <Button variant="secondary">Click me</Button>
</ConfirmButton>
```

<ArgTypes of={ConfirmButton} />
