From c1d23081b476c437448e32e378bf41db0b38719b Mon Sep 17 00:00:00 2001
From: Neko <neko@ayaka.moe>
Date: Thu, 3 Sep 2026 02:13:09 +0800
Subject: [PATCH] feat(ui): add FieldButton component (#2448)

---
 docs/ai/context/ui-components.md              | 17 ++++++++
 .../components/form/field/field-button.vue    | 42 +++++++++++++++++++
 .../ui/src/components/form/field/index.ts     |  1 +
 3 files changed, 60 insertions(+)
 create mode 100644 packages/ui/src/components/form/field/field-button.vue

diff --git a/docs/ai/context/ui-components.md b/docs/ai/context/ui-components.md
index 0badbe8ad..b78ec973f 100644
--- a/docs/ai/context/ui-components.md
+++ b/docs/ai/context/ui-components.md
@@ -527,6 +527,23 @@ Tab-like selection using radio buttons with animated indicator.
 
 All Field components wrap a base input with `label`, `description`, and consistent layout. Common slots: `label`, `description`.
 
+### FieldButton
+
+Displays field information on the left and a compact action button on the right.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | *(required)* | Field label |
+| `description` | `string?` | — | Helper text |
+| `buttonLabel` | `string` | *(required)* | Action button label |
+| `buttonIcon` | `string?` | — | UnoCSS/Iconify class for the action button |
+| `disabled` | `boolean?` | — | Prevents the action |
+| `loading` | `boolean?` | — | Shows a spinner and prevents the action |
+
+**Slots**: `label`, `description`
+
+**Emits**: `click(event: MouseEvent)`
+
 ### FieldInput
 
 | Prop | Type | Default | Description |
diff --git a/packages/ui/src/components/form/field/field-button.vue b/packages/ui/src/components/form/field/field-button.vue
new file mode 100644
index 000000000..fa55f0425
--- /dev/null
+++ b/packages/ui/src/components/form/field/field-button.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Button } from '../../misc'
+
+const props = defineProps<{
+  label: string
+  description?: string
+  buttonLabel: string
+  buttonIcon?: string
+  disabled?: boolean
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <div :class="['flex items-center gap-4']">
+    <div :class="['min-w-0 flex-1']">
+      <div :class="['flex items-center gap-1 text-sm font-medium']">
+        <slot name="label">
+          {{ props.label }}
+        </slot>
+      </div>
+      <div :class="['text-xs opacity-60']">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </div>
+    </div>
+    <Button
+      :label="props.buttonLabel"
+      :icon="props.buttonIcon"
+      :disabled="props.disabled"
+      :loading="props.loading"
+      size="sm"
+      variant="secondary"
+      @click="emit('click', $event)"
+    />
+  </div>
+</template>
diff --git a/packages/ui/src/components/form/field/index.ts b/packages/ui/src/components/form/field/index.ts
index b895482bd..11c49ab9e 100644
--- a/packages/ui/src/components/form/field/index.ts
+++ b/packages/ui/src/components/form/field/index.ts
@@ -1,3 +1,4 @@
+export { default as FieldButton } from './field-button.vue'
 export { default as FieldCheckbox } from './field-checkbox.vue'
 export { default as FieldCombobox } from './field-combobox-select.vue'
 export { default as FieldInputFile } from './field-input-file.vue'