# ActionButtons

**When to use:** Standardised Submit / Cancel button pair for forms, dialogs, and drawer footers. Keeps spacing and loading states consistent.

**Keywords:** confirm, form footer

**Import:** `import { ActionButtons } from '@ahrowe/ui'`

```tsx
import { ActionButtons, ThemeColor } from '@ahrowe/ui';

<ActionButtons
  labels={{ submit: 'Save', cancel: 'Discard' }}
  onSubmit={handleSave}
  onClose={handleClose}
  isSubmitButtonLoading={isSaving}
/>

// Destructive action
<ActionButtons
  labels={{ submit: 'Delete' }}
  submitButtonColor={ThemeColor.Error}
  onSubmit={handleDelete}
  onClose={onClose}
/>

// Stacked, full-width buttons, a common mobile default
<ActionButtons
  labels={{ submit: 'Save' }}
  onSubmit={handleSave}
  onClose={handleClose}
  stackButtons
/>
```

**In a form:** the primary button is `type="submit"`, so Enter in a field submits the form. Inside a
FormValidatorGroup's `form.Form`, `onSubmit={form.submit}` still submits once: `submit` cancels the
click's own default.

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `onSubmit` | `() => void` | Primary button click |
| `onClose` | `() => void` | Secondary button click |
| `labels.submit` | `ReactNode \| string` | Primary button label |
| `labels.cancel` | `ReactNode \| string` | Secondary button label |
| `submitButtonStyle` | `ButtonStyleType` | Default `Filled` |
| `submitButtonColor` | `ColorValue` | Default `Primary`; `Error` for a destructive confirm; or any CSS colour |
| `cancelButtonStyle` | `ButtonStyleType` | Default `Outlined` |
| `cancelButtonColor` | `ColorValue` | Default `Primary`; or any CSS colour |
| `isSubmitButtonLoading` | `boolean` | Shows spinner on primary button |
| `isSubmitButtonDisabled` | `boolean` | |
| `isCancelButtonLoading` | `boolean` | |
| `isCancelButtonDisabled` | `boolean` | |
| `hidePrimaryButton` | `boolean` | |
| `hideSecondaryButton` | `boolean` | |
| `noMargin` | `boolean` | Remove top margin |
| `stackButtons` | `boolean` | Stack the buttons vertically, each stretched to full width (default `false`). A common mobile default, easy to set globally via `ConfigProvider` |

**Slots:** `root` `submitButton` `cancelButton`

**Labels:** `submit` `cancel` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `ActionButtonsLabels`.