@cat-factory/app 0.310.1 → 0.310.2

package/app/components/panels/inspector/InitiativeInspector.vue

@@ -49,7 +49,7 @@ function control(action: 'pause' | 'resume' | 'cancel') {
 <template>
   <div class="space-y-3" data-testid="initiative-inspector">
     <div class="flex items-center gap-2">
-      <UBadge color="primary" variant="subtle" size="sm">
+      <UBadge variant="subtle" size="sm">
         {{ t(INITIATIVE_STATUS_LABEL_KEYS[status]) }}
       </UBadge>
       <span v-if="progress" class="text-2xs text-muted">
@@ -70,7 +70,6 @@ function control(action: 'pause' | 'resume' | 'cancel') {
         data-testid="initiative-review"
         :data-attention="attention.kind"
         color="warning"
-        variant="solid"
         size="sm"
         :icon="INITIATIVE_ATTENTION_ICONS[attention.kind]"
         @click="attention.open()"
@@ -80,8 +79,6 @@ function control(action: 'pause' | 'resume' | 'cancel') {
       <UButton
         v-else-if="awaitingAnswers"
         data-testid="initiative-answer-planning"
-        color="primary"
-        variant="solid"
         size="sm"
         icon="i-lucide-messages-square"
         @click="openPlanning"
@@ -104,7 +101,6 @@ function control(action: 'pause' | 'resume' | 'cancel') {
       </UButton>
       <UButton
         data-testid="initiative-run-planning"
-        color="primary"
         variant="soft"
         size="sm"
         icon="i-lucide-play"
@@ -143,7 +139,6 @@ function control(action: 'pause' | 'resume' | 'cancel') {
       <UButton
         v-if="isPaused"
         data-testid="initiative-resume"
-        color="primary"
         variant="soft"
         size="sm"
         icon="i-lucide-play"

package/app/components/panels/inspector/RecurringScheduleSettings.vue

@@ -206,9 +206,7 @@ function fmtTime(ms: number) {
           "
           >{{ t('common.cancel') }}</UButton
         >
-        <UButton size="xs" color="primary" :loading="busy" @click="saveEdit">{{
-          t('common.save')
-        }}</UButton>
+        <UButton size="xs" :loading="busy" @click="saveEdit">{{ t('common.save') }}</UButton>
       </div>
     </template>
 

package/app/components/panels/inspector/ServiceReleaseHealthConfig.vue

@@ -145,14 +145,7 @@ async function clear() {
         <UInput v-model="draft.envTag" placeholder="prod" size="sm" class="w-full" />
       </UFormField>
       <div class="flex justify-end">
-        <UButton
-          color="primary"
-          variant="soft"
-          size="xs"
-          icon="i-lucide-save"
-          :loading="busy"
-          @click="save"
-        >
+        <UButton variant="soft" size="xs" icon="i-lucide-save" :loading="busy" @click="save">
           {{ t('inspector.releaseHealth.saveMonitoring') }}
         </UButton>
       </div>

package/app/components/panels/inspector/ServiceSelfTests.vue

@@ -204,7 +204,6 @@ async function stop(mode: EnvironmentTestMode) {
         v-if="!isRunning('provision')"
         icon="i-lucide-flask-conical"
         size="xs"
-        color="primary"
         variant="soft"
         data-testid="env-test-start"
         :loading="starting.provision"
@@ -291,7 +290,6 @@ async function stop(mode: EnvironmentTestMode) {
         v-if="!isRunning('agent-probe')"
         icon="i-lucide-bot"
         size="xs"
-        color="primary"
         variant="soft"
         data-testid="env-probe-start"
         :loading="starting['agent-probe']"

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -467,7 +467,6 @@ function setSize(value: InstanceSize) {
       <UButton
         size="xs"
         variant="soft"
-        color="primary"
         icon="i-lucide-flask-conical"
         data-testid="env-setup-nudge-open"
         @click="ui.openEnvironmentSetup(props.block.id)"
@@ -484,7 +483,6 @@ function setSize(value: InstanceSize) {
         <UButton
           size="xs"
           variant="soft"
-          color="primary"
           icon="i-lucide-wand-sparkles"
           :loading="detecting"
           @click="detectFromRepo"
@@ -811,7 +809,6 @@ function setSize(value: InstanceSize) {
           <UButton
             size="xs"
             variant="soft"
-            color="primary"
             icon="i-lucide-file-cog"
             :loading="generating"
             :disabled="!customManifestPath && !selectedCustomType?.defaultManifestPath"
@@ -877,7 +874,7 @@ function setSize(value: InstanceSize) {
               </template>
               <template v-else>{{ t('inspector.testConfig.noFileSelected') }}</template>
             </p>
-            <UButton size="xs" color="primary" :disabled="!pickedPath" @click="applyPicked">
+            <UButton size="xs" :disabled="!pickedPath" @click="applyPicked">
               {{ t('inspector.testConfig.useThisFile') }}
             </UButton>
           </div>

package/app/components/panels/inspector/ServiceTestSecrets.vue

@@ -250,7 +250,6 @@ async function clearAll() {
           {{ t('inspector.testSecrets.addRow') }}
         </UButton>
         <UButton
-          color="primary"
           variant="soft"
           size="xs"
           icon="i-lucide-save"

package/app/components/panels/inspector/ServiceTestingContext.vue

@@ -124,7 +124,6 @@ function revert() {
           {{ t('inspector.testingContext.revert') }}
         </UButton>
         <UButton
-          color="primary"
           variant="soft"
           size="xs"
           icon="i-lucide-save"

package/app/components/panels/inspector/ServiceValidationConfig.vue

@@ -319,7 +319,6 @@ async function clear() {
             {{ t('inspector.validationChecks.addCheck') }}
           </UButton>
           <UButton
-            color="primary"
             variant="soft"
             size="xs"
             icon="i-lucide-save"

package/app/components/panels/inspector/TaskExecution.vue

@@ -496,7 +496,6 @@ async function mergePr() {
                  branch each is how the candidate park shipped with no button at all. -->
             <UButton
               v-else-if="s.approval && s.approval.status === 'pending' && redirectPark(s)"
-              color="primary"
               variant="soft"
               size="xs"
               :icon="REDIRECT_PARK_PRESENTATION[redirectPark(s)!].icon"
@@ -514,7 +513,6 @@ async function mergePr() {
                 s.approval.status === 'pending' &&
                 s.prReview?.status === 'awaiting_selection'
               "
-              color="primary"
               variant="soft"
               size="xs"
               icon="i-lucide-clipboard-check"
@@ -630,7 +628,6 @@ async function mergePr() {
          merged task whose run instance is long gone. -->
     <UButton
       v-if="outcomeReadable"
-      color="primary"
       variant="soft"
       size="sm"
       icon="i-lucide-clipboard-check"
@@ -690,7 +687,6 @@ async function mergePr() {
       <UButton
         class="mt-2"
         color="success"
-        variant="solid"
         size="sm"
         icon="i-lucide-git-merge"
         block

package/app/components/panels/inspector/TaskReviewTarget.vue

@@ -133,7 +133,6 @@ function revert() {
     </p>
     <UButton
       v-if="guidedTarget"
-      color="primary"
       variant="soft"
       size="sm"
       icon="i-lucide-scan-search"
@@ -151,7 +150,6 @@ function revert() {
       <div v-if="dirty" class="mt-2 flex items-center gap-2">
         <UButton
           size="xs"
-          color="primary"
           variant="soft"
           :loading="saving"
           data-testid="inspector-review-skills-save"

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -305,13 +305,7 @@ const technicalLabel = computed(() => {
         </PipelinePicker>
       </div>
       <div v-if="selectedPipeline" class="flex items-center gap-1">
-        <UBadge
-          color="primary"
-          variant="subtle"
-          size="sm"
-          class="cursor-pointer"
-          @click="setPipeline('')"
-        >
+        <UBadge variant="subtle" size="sm" class="cursor-pointer" @click="setPipeline('')">
           {{ selectedPipeline.name }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
@@ -615,13 +609,7 @@ const technicalLabel = computed(() => {
         </UDropdownMenu>
       </div>
       <div v-if="responsibleLabel" class="flex items-center gap-1">
-        <UBadge
-          color="primary"
-          variant="subtle"
-          size="sm"
-          class="cursor-pointer"
-          @click="setResponsible('')"
-        >
+        <UBadge variant="subtle" size="sm" class="cursor-pointer" @click="setResponsible('')">
           {{ responsibleLabel }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>

package/app/components/panels/inspector/TaskTypeFields.vue

@@ -92,7 +92,6 @@ function revert() {
     <div v-if="dirty" class="mt-2 flex items-center gap-2">
       <UButton
         size="xs"
-        color="primary"
         variant="soft"
         :loading="saving"
         :disabled="problems.length > 0"

package/app/components/pipeline/AgentPromptEditor.vue

@@ -242,7 +242,6 @@ function revisionLabel(revision: AgentPromptRevision): string {
 
         <div class="flex flex-wrap items-center gap-2">
           <UButton
-            color="primary"
             size="sm"
             icon="i-lucide-save"
             :loading="prompts.saving"
@@ -308,7 +307,6 @@ function revisionLabel(revision: AgentPromptRevision): string {
             >
               <UBadge
                 v-if="revision.revision === detail.revisions[0]?.revision"
-                color="primary"
                 variant="subtle"
                 size="sm"
               >

package/app/components/pipeline/IterationCapPrompt.vue

@@ -41,7 +41,6 @@ const emit = defineEmits<{ resolve: [choice: IterationCapChoice] }>()
     <p class="mt-1 text-xs text-app-warning-200/80">{{ detail }}</p>
     <div class="mt-3 flex flex-wrap gap-2">
       <UButton
-        color="primary"
         variant="soft"
         size="xs"
         icon="i-lucide-rotate-cw"

package/app/components/pipeline/PipelineBuilder.vue

@@ -428,13 +428,7 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
             <SectionLabel as="h3">
               {{ t('pipeline.builder.agentPalette') }}
             </SectionLabel>
-            <UButton
-              color="primary"
-              variant="soft"
-              size="xs"
-              icon="i-lucide-plus"
-              @click="openAddAgent"
-            >
+            <UButton variant="soft" size="xs" icon="i-lucide-plus" @click="openAddAgent">
               {{ t('pipeline.builder.addAgent') }}
             </UButton>
           </div>
@@ -1243,7 +1237,6 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
                        concealed-setting failure. -->
                   <UBadge
                     v-if="p.isDefault"
-                    color="primary"
                     variant="subtle"
                     size="xs"
                     class="shrink-0"
@@ -1396,7 +1389,6 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
           {{ pipelines.editingId ? t('pipeline.builder.cancelEdit') : t('pipeline.builder.clear') }}
         </UButton>
         <UButton
-          color="primary"
           icon="i-lucide-save"
           size="sm"
           :disabled="pipelines.draft.length === 0 || stepsDisallowedByPurpose.length > 0"
@@ -1465,7 +1457,6 @@ const { toggleArchive, toggleDefault, edit, removePipeline, clone } = usePipelin
           {{ t('common.cancel') }}
         </UButton>
         <UButton
-          color="primary"
           icon="i-lucide-plus"
           size="sm"
           :disabled="!newAgentName.trim()"

package/app/components/pipeline/PipelineHealthModal.vue

@@ -151,7 +151,6 @@ const reseedableCount = computed(
               </div>
               <UButton
                 size="xs"
-                color="primary"
                 variant="subtle"
                 icon="i-lucide-plus"
                 :loading="isBusy(p.id)"
@@ -207,7 +206,6 @@ const reseedableCount = computed(
                 <UButton
                   v-if="h.pipeline.builtin"
                   size="xs"
-                  color="primary"
                   variant="subtle"
                   icon="i-lucide-rotate-ccw"
                   :loading="isBusy(h.pipeline.id)"
@@ -296,7 +294,6 @@ const reseedableCount = computed(
               </div>
               <UButton
                 size="xs"
-                color="primary"
                 variant="subtle"
                 icon="i-lucide-rotate-ccw"
                 :loading="isBusy(h.pipeline.id)"
@@ -315,7 +312,6 @@ const reseedableCount = computed(
       <div class="flex w-full items-center justify-between gap-2">
         <UButton
           v-if="reseedableCount > 1"
-          color="primary"
           variant="ghost"
           icon="i-lucide-rotate-ccw"
           :loading="anyBusy"

package/app/components/prReview/PrReviewWindow.vue

@@ -588,7 +588,6 @@ const { requestClose } = useUnsavedGuard({
                 {{ t('prReview.selectedCount', { count: activeSelectedIds.length }) }}
               </span>
               <UButton
-                color="primary"
                 variant="link"
                 class="p-0 text-2xs text-primary hover:underline"
                 @click="selectAll"
@@ -596,7 +595,6 @@ const { requestClose } = useUnsavedGuard({
                 {{ t('prReview.selectAll') }}
               </UButton>
               <UButton
-                color="primary"
                 variant="link"
                 class="p-0 text-2xs text-primary hover:underline"
                 @click="clearAll"
@@ -760,7 +758,6 @@ const { requestClose } = useUnsavedGuard({
                       class="mt-1.5 flex items-center gap-3 text-2xs"
                     >
                       <UButton
-                        color="primary"
                         variant="link"
                         v-if="!isRetracted(f)"
                         data-testid="pr-review-finding-challenge"
@@ -880,7 +877,6 @@ const { requestClose } = useUnsavedGuard({
         {{ postReport ? t('prReview.postReport.retry') : t('prReview.post') }}
       </UButton>
       <UButton
-        color="primary"
         :loading="prReview.resolving"
         :disabled="!canResolve || !hasSelection || !access.canExecuteRuns.value"
         :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"

package/app/components/providers/AiPresetMismatchDialog.vue

@@ -97,7 +97,7 @@ function go(action: () => void) {
           >
             {{ t('providers.presetMismatch.configureVendors') }}
           </UButton>
-          <UButton color="primary" size="sm" icon="i-lucide-cpu" @click="go(ui.openModelConfig)">
+          <UButton size="sm" icon="i-lucide-cpu" @click="go(ui.openModelConfig)">
             {{ t('providers.presetMismatch.editPresets') }}
           </UButton>
         </div>

package/app/components/providers/AiProviderOnboardingModal.vue

@@ -100,19 +100,13 @@ const routes = computed<Route[]>(() => [
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
                 <p class="text-sm font-semibold text-app-100">{{ r.title }}</p>
-                <UBadge v-if="r.badge" color="primary" variant="subtle" size="sm">
+                <UBadge v-if="r.badge" variant="subtle" size="sm">
                   {{ r.badge }}
                 </UBadge>
               </div>
               <p class="mt-0.5 text-sm leading-relaxed text-muted">{{ r.body }}</p>
             </div>
-            <UButton
-              size="sm"
-              color="primary"
-              variant="subtle"
-              class="shrink-0"
-              @click="r.onSelect()"
-            >
+            <UButton size="sm" variant="subtle" class="shrink-0" @click="r.onSelect()">
               {{ r.cta }}
             </UButton>
           </div>

package/app/components/providers/VendorCredentialsModal.vue

@@ -206,13 +206,7 @@ function vendorLabel(v: SubscriptionVendor): string {
               <p class="min-w-0 flex-1 text-sm text-toned">
                 {{ t('providers.vendorCredentials.personalCallout.text') }}
               </p>
-              <UButton
-                size="xs"
-                color="primary"
-                variant="subtle"
-                class="shrink-0"
-                @click="activeTab = 'personal'"
-              >
+              <UButton size="xs" variant="subtle" class="shrink-0" @click="activeTab = 'personal'">
                 {{ t('providers.vendorCredentials.personalCallout.cta') }}
               </UButton>
             </div>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -921,7 +921,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                             v-if="autoDefaults.get(item.id)!.groundedInFragment"
                             size="xs"
                             variant="subtle"
-                            color="primary"
                           >
                             {{
                               t('requirements.currentStandard', {
@@ -1027,7 +1026,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                             </p>
                             <div class="mt-2 flex flex-wrap items-center gap-2">
                               <UButton
-                                color="primary"
                                 variant="soft"
                                 size="xs"
                                 icon="i-lucide-check"
@@ -1231,7 +1229,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             class="border-t border-default pt-4"
           >
             <UButton
-              color="primary"
               variant="soft"
               size="sm"
               block
@@ -1255,7 +1252,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <div v-if="review && status === 'ready'" class="space-y-2 border-t border-default pt-4">
             <UButton
               v-if="canProceed"
-              color="primary"
               size="sm"
               block
               icon="i-lucide-arrow-right"
@@ -1270,7 +1266,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </UButton>
             <UButton
               v-else
-              color="primary"
               size="sm"
               block
               icon="i-lucide-wand-sparkles"
@@ -1296,7 +1291,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <!-- action: merged (inspect → re-review / redo) -->
           <div v-if="review && merged" class="space-y-2 border-t border-default pt-4">
             <UButton
-              color="primary"
               size="sm"
               block
               icon="i-lucide-sparkles"
@@ -1333,7 +1327,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 :placeholder="t('requirements.redoPlaceholder')"
               />
               <UButton
-                color="primary"
                 variant="soft"
                 size="xs"
                 block

package/app/components/sandbox/SandboxPanel.vue

@@ -457,7 +457,6 @@ async function archive(prompt: SandboxPromptVersion) {
                 </span>
               </span>
               <UButton
-                color="primary"
                 icon="i-lucide-play"
                 size="sm"
                 :loading="store.launching"
@@ -632,7 +631,6 @@ async function archive(prompt: SandboxPromptVersion) {
                 <IconButton
                   v-if="canPromote(p)"
                   icon="i-lucide-rocket"
-                  color="primary"
                   variant="ghost"
                   size="xs"
                   :loading="promoting === p.id"
@@ -674,7 +672,6 @@ async function archive(prompt: SandboxPromptVersion) {
                 {{ t('common.cancel') }}
               </UButton>
               <UButton
-                color="primary"
                 icon="i-lucide-save"
                 size="sm"
                 :loading="savingPrompt"

package/app/components/settings/BudgetSettings.vue

@@ -167,13 +167,7 @@ function saveUser() {
         }}
       </div>
       <div class="flex justify-end">
-        <UButton
-          color="primary"
-          icon="i-lucide-save"
-          size="sm"
-          :loading="savingWorkspace"
-          @click="saveWorkspace"
-        >
+        <UButton icon="i-lucide-save" size="sm" :loading="savingWorkspace" @click="saveWorkspace">
           {{ t('settings.workspaceSettings.budget.saveTier') }}
         </UButton>
       </div>
@@ -222,7 +216,6 @@ function saveUser() {
       </p>
       <div v-if="canEditAccount" class="flex justify-end">
         <UButton
-          color="primary"
           icon="i-lucide-save"
           size="sm"
           :loading="savingAccount"
@@ -273,7 +266,6 @@ function saveUser() {
       </div>
       <div class="flex justify-end">
         <UButton
-          color="primary"
           icon="i-lucide-save"
           size="sm"
           :loading="savingUser"

package/app/components/settings/ComposeEnvironmentSetupSection.vue

@@ -90,7 +90,6 @@ function start() {
     <div class="flex items-center gap-2">
       <UButton
         size="xs"
-        color="primary"
         variant="soft"
         icon="i-lucide-wand-sparkles"
         data-testid="compose-env-setup-start"

package/app/components/settings/ConsensusGroupsSection.vue

@@ -483,7 +483,6 @@ async function remove(group: ConsensusGroup) {
           {{ t('settings.consensusGroups.editor.cancel') }}
         </UButton>
         <UButton
-          color="primary"
           size="sm"
           :loading="busy"
           :disabled="!editor.name.trim() || gatingIncomplete"

package/app/components/settings/CustomManifestTypeEditor.vue

@@ -192,7 +192,7 @@ async function remove(type: CustomManifestType) {
         <UButton v-if="editing" color="neutral" variant="ghost" size="sm" @click="startAdd">
           {{ t('common.cancel') }}
         </UButton>
-        <UButton color="primary" size="sm" :loading="busy" :disabled="!canSave" @click="save">
+        <UButton size="sm" :loading="busy" :disabled="!canSave" @click="save">
           {{ editing ? t('common.save') : t('settings.infrastructure.customType.add') }}
         </UButton>
       </div>

package/app/components/settings/DefaultProvisionTypeSection.vue

@@ -156,7 +156,6 @@ async function save() {
     <div class="flex items-center gap-2">
       <UButton
         size="xs"
-        color="primary"
         icon="i-lucide-check"
         :loading="saving"
         :disabled="!canSave"

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -527,7 +527,7 @@ function toastRemoved() {
               class="h-3.5 w-3.5"
             />
             {{ t('settings.infrastructure.handler.personalOverride') }}
-            <UBadge v-if="kubeUserHandler" color="primary" variant="subtle" size="sm">
+            <UBadge v-if="kubeUserHandler" variant="subtle" size="sm">
               {{ t('settings.infrastructure.handler.overrideActive') }}
             </UBadge>
           </SectionLabel>

package/app/components/settings/IssueTrackerPanel.vue

@@ -437,14 +437,7 @@ async function checkSetup(source: TaskSourceKind) {
     </section>
 
     <div class="flex justify-end">
-      <UButton
-        color="primary"
-        icon="i-lucide-save"
-        size="sm"
-        :loading="saving"
-        :disabled="!canSave"
-        @click="save"
-      >
+      <UButton icon="i-lucide-save" size="sm" :loading="saving" :disabled="!canSave" @click="save">
         {{ t('common.save') }}
       </UButton>
     </div>

package/app/components/settings/KubernetesEngineForm.vue

@@ -604,13 +604,7 @@ async function copyAutoSetupCommand() {
       <p v-if="connectBlockedReason" class="flex-1 text-left text-xs text-app-error-400">
         {{ connectBlockedReason }}
       </p>
-      <UButton
-        color="primary"
-        size="sm"
-        :loading="busy"
-        :disabled="!canSave"
-        @click="emit('save', buildPayload())"
-      >
+      <UButton size="sm" :loading="busy" :disabled="!canSave" @click="emit('save', buildPayload())">
         {{ connected ? t('common.save') : t('settings.providerConnection.form.connect') }}
       </UButton>
     </div>

package/app/components/settings/KubernetesEnvironmentForm.vue

@@ -458,13 +458,7 @@ function optional(label: string): string {
       <p v-if="connectBlockedReason" class="flex-1 text-left text-xs text-app-error-400">
         {{ connectBlockedReason }}
       </p>
-      <UButton
-        color="primary"
-        size="sm"
-        :loading="busy"
-        :disabled="!canSave"
-        @click="emit('save', buildPayload())"
-      >
+      <UButton size="sm" :loading="busy" :disabled="!canSave" @click="emit('save', buildPayload())">
         {{
           connection?.kind === 'kubernetes'
             ? t('common.save')

package/app/components/settings/LocalContainerPoolSettings.vue

@@ -164,7 +164,7 @@ async function save() {
     </section>
 
     <div class="flex justify-end">
-      <UButton color="primary" icon="i-lucide-save" :loading="saving" @click="save">
+      <UButton icon="i-lucide-save" :loading="saving" @click="save">
         {{ t('common.save') }}
       </UButton>
     </div>

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -472,7 +472,6 @@ async function remove(p: LocalRunner) {
 
           <div class="flex justify-end">
             <UButton
-              color="primary"
               variant="soft"
               size="sm"
               icon="i-lucide-save"