ActionButton

ActionButton component with confirmation popover or dialog

import { ActionButton } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`label`	Optional	`string \| undefined`	—	—
`loading`	Optional	`boolean \| undefined`	—	—
`disabled`	Optional	`boolean \| undefined`	—	—
`className`	Optional	`string \| undefined`	—	—
`variant`	Optional	`TActionButtonVariant \| undefined`	—	—
`confirmation`	Required	`ActionButtonConfirmation`	—	—
`mode`	Optional	`"dialog" \| "popover" \| undefined`	—	Confirmation mode: popover (inline) or dialog (modal). Default: popover

Usage

A button that requires confirmation before executing an action. The confirmation UI can be an inline popover or a modal dialog.

Notes

In popover mode the confirm button defaults to variant="primary"; in dialog mode it uses the same variant as the trigger.
The component manages its own open/close state — no external state required.

Example

/** * Runnable example for ActionButton. */import { ActionButton } from '@tetherto/mdk-react-devkit'export const ActionButtonExample = () => (  <div className="mdk-example-row">    <ActionButton      label="Reboot Device"      variant="secondary"      confirmation={{        title: 'Reboot Device',        description:          'This will restart all communication workers. The device will be temporarily unavailable.',        confirmLabel: 'Reboot',        cancelLabel: 'Cancel',      }}    />    <ActionButton      label="Factory Reset"      variant="danger"      mode="dialog"      confirmation={{        title: 'Confirm Factory Reset',        description: 'This action cannot be undone. All device settings will be erased.',        confirmLabel: 'Reset',      }}    />    <ActionButton      label="Disabled Action"      variant="secondary"      disabled      confirmation={{        title: 'Disabled',      }}    />  </div>)