nuxt-x-app
Buttons
Action button components for common dashboard operations.
Buttons
Pre-built action buttons for common admin dashboard operations. All extend Nuxt UI's UButton.
Components
| Component | Icon | Description |
|---|---|---|
<XABtnBack /> | arrow-left | Navigate back |
<XABtnCopy /> | clipboard | Copy text to clipboard |
<XABtnEdit /> | pencil | Edit action |
<XABtnView /> | eye | View/detail action |
<XABtnRefresh /> | arrow-path | Reload data |
<XABtnSubmit /> | check | Form submit with loading state |
<XABtnExport /> | arrow-down-tray | Export data |
<XABtnExportIcal /> | calendar | Export to iCal |
<XABtnDropdown /> | ellipsis-vertical | Dropdown actions menu |
<XABtnQuickActions /> | bolt | Quick actions panel |
<XABtnConfirmDelete /> | trash | Delete with confirmation dialog |
Usage
<!-- In a data table row -->
<div class="flex gap-2">
<XABtnView :to="`/users/${row.id}`" />
<XABtnEdit @click="openEdit(row)" />
<XABtnConfirmDelete @confirm="deleteItem(row.id)" :label="row.name" />
</div>
<!-- Submit button with loading -->
<XABtnSubmit :loading="saving" label="Save Changes" />
<!-- Copy to clipboard -->
<XABtnCopy :value="apiKey" />
<XABtnConfirmDelete />
Shows a confirmation modal before calling the confirm handler.
<XABtnConfirmDelete
:label="item.name"
confirm-text="Delete forever"
@confirm="handleDelete"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | Item name shown in confirmation |
confirmText | string | 'Delete' | Confirmation button text |
loading | boolean | false | Loading state |
Emits
| Event | Description |
|---|---|
confirm | Fires when user confirms deletion |
cancel | Fires when user cancels |
AI Context
category: Buttons
package: "@xenterprises/nuxt-x-app"
use-when: CRUD table rows, form actions, data management interfaces
pattern: Place XABtnView, XABtnEdit, XABtnConfirmDelete together in table action columns
XABtnConfirmDelete: requires @confirm event handler, shows modal before deleting
XABtnSubmit: wraps form submit, shows loading spinner automatically
