---
metaTitle: ModalButtons component | AwesCode UI
meta:
  - name: description
    content: The <AwModalButtons /> component provides modal footer buttons - UI Vue component for AwesCode UI.
title: ModalButtons
---

# AwModalButtons

**Category:** Organism | **Import:** Dynamic

The `AwModalButtons` component provides a standardized button layout for modal footers.

## Usage

```markup
<AwModal :show="showModal">
  <template #title>Confirm Action</template>
  <p>Are you sure?</p>
  
  <AwModalButtons
    confirm-text="Yes, Delete"
    cancel-text="Cancel"
    @confirm="handleDelete"
    @cancel="showModal = false"
  />
</AwModal>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| confirmText | Confirm button text | `String` | `false` | `'Confirm'` |
| cancelText | Cancel button text | `String` | `false` | `'Cancel'` |
| confirmColor | Confirm button color | `String` | `false` | `'accent'` |
| loading | Show loading state | `Boolean` | `false` | `false` |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| confirm | - | Confirm button clicked |
| cancel | - | Cancel button clicked |

## Related Components

- [AwModal](aw-modal.md) - Modal component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Standard button layout for modals
- Loading state disables buttons