X Enterprises
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

ComponentIconDescription
<XABtnBack />arrow-leftNavigate back
<XABtnCopy />clipboardCopy text to clipboard
<XABtnEdit />pencilEdit action
<XABtnView />eyeView/detail action
<XABtnRefresh />arrow-pathReload data
<XABtnSubmit />checkForm submit with loading state
<XABtnExport />arrow-down-trayExport data
<XABtnExportIcal />calendarExport to iCal
<XABtnDropdown />ellipsis-verticalDropdown actions menu
<XABtnQuickActions />boltQuick actions panel
<XABtnConfirmDelete />trashDelete 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

PropTypeDefaultDescription
labelstringrequiredItem name shown in confirmation
confirmTextstring'Delete'Confirmation button text
loadingbooleanfalseLoading state

Emits

EventDescription
confirmFires when user confirms deletion
cancelFires 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
Copyright © 2026