import { Meta, Props } from '@storybook/addon-docs/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>
```
<Props of={ConfirmButton} />