Skip to main content
The DActionButtons component provides a standardized footer button group with primary and secondary actions. It supports customization for text, icons, navigation, disabled states, and layout orientation.

​
Props

​
primaryButtonText
string
default:""
Text label for the primary action button
​
primaryButtonIcon
string
default:""
Icon displayed on the left side of the primary button
​
primaryButtonTrailingIcon
string
default:""
Icon displayed on the right side of the primary button
​
primaryButtonTo
string
default:""
Navigation target for the primary button
​
primaryButtonColor
ButtonColor
default:"primary"
Color variant for the primary button
​
secondaryButtonText
string
default:""
Text label for the secondary action button
​
secondaryButtonTo
string
default:""
Navigation target for the secondary button
​
hasButtonsBlock
boolean
default:"false"
Whether buttons should expand to fill available space
​
isReverse
boolean
default:"false"
Whether to reverse the button order (primary on left, secondary on right)
​
isPrimaryButtonDisabled
boolean
default:"false"
Whether the primary button is disabled
​
isSecondaryButtonDisabled
boolean
default:"false"
Whether the secondary button is disabled
​
classButtons
ClassNameValue
default:""
Additional CSS classes for individual buttons
​
class
ClassNameValue
default:""
Additional CSS classes for the container footer element

​
Events

​
on-click-primary-button
() => void
Emitted when the primary button is clicked
​
on-click-secondary-button
() => void
Emitted when the secondary button is clicked

​
Usage

​
Basic Action Buttons

<template>
  <DActionButtons
    primary-button-text="Save"
    secondary-button-text="Cancel"
    @on-click-primary-button="handleSave"
    @on-click-secondary-button="handleCancel"
  />
</template>

<script setup>
function handleSave() {
  console.log('Saving...')
}

function handleCancel() {
  console.log('Cancelled')
}
</script>

​
With Icons

<template>
  <DActionButtons
    primary-button-text="Create"
    primary-button-icon="i-lucide-plus"
    secondary-button-text="Cancel"
    @on-click-primary-button="handleCreate"
  />
</template>

​
With Trailing Icon

<template>
  <DActionButtons
    primary-button-text="Next"
    primary-button-trailing-icon="i-lucide-arrow-right"
    secondary-button-text="Back"
    @on-click-primary-button="goNext"
    @on-click-secondary-button="goBack"
  />
</template>

​
Full-Width Buttons

<template>
  <DActionButtons
    primary-button-text="Confirm"
    secondary-button-text="Cancel"
    has-buttons-block
    @on-click-primary-button="handleConfirm"
  />
</template>

​
Reversed Order

<template>
  <DActionButtons
    primary-button-text="Delete"
    primary-button-color="error"
    secondary-button-text="Keep"
    is-reverse
    @on-click-primary-button="handleDelete"
  />
</template>

​
With Navigation

<template>
  <DActionButtons
    primary-button-text="View Details"
    primary-button-to="/details"
    secondary-button-text="Back to List"
    secondary-button-to="/list"
  />
</template>

​
Disabled States

<template>
  <DActionButtons
    primary-button-text="Submit"
    :is-primary-button-disabled="!formValid"
    secondary-button-text="Cancel"
    @on-click-primary-button="handleSubmit"
  />
</template>

<script setup>
const formValid = ref(false)
</script>

​
Custom Colors

<template>
  <DActionButtons
    primary-button-text="Approve"
    primary-button-color="success"
    secondary-button-text="Reject"
    @on-click-primary-button="handleApprove"
    @on-click-secondary-button="handleReject"
  />
</template>

​
Form Footer Example

<template>
  <form @submit.prevent="handleSubmit">
    <UFormField label="Name" name="name">
      <UInput v-model="formData.name" />
    </UFormField>
    
    <UFormField label="Email" name="email">
      <UInput v-model="formData.email" type="email" />
    </UFormField>
    
    <DActionButtons
      primary-button-text="Save Changes"
      secondary-button-text="Reset"
      class="mt-6"
      :is-primary-button-disabled="!isFormDirty"
      @on-click-primary-button="handleSubmit"
      @on-click-secondary-button="resetForm"
    />
  </form>
</template>

​
Modal Footer

<template>
  <BModal v-model="isOpen" title="Edit Profile">
    <p>Modal content here</p>
    
    <template #footer>
      <DActionButtons
        primary-button-text="Save"
        secondary-button-text="Cancel"
        class="w-full justify-end"
        class-buttons="w-32"
        @on-click-primary-button="handleSave"
        @on-click-secondary-button="isOpen = false"
      />
    </template>
  </BModal>
</template>

​
Card Footer with Actions

<template>
  <BCard>
    <template #header>
      <h3>Project Details</h3>
    </template>
    
    <p>Project information...</p>
    
    <template #footer>
      <DActionButtons
        primary-button-text="Update"
        primary-button-icon="i-lucide-save"
        secondary-button-text="Cancel"
        @on-click-primary-button="handleUpdate"
        @on-click-secondary-button="handleCancel"
      />
    </template>
  </BCard>
</template>

​
Styling

Default button styles:
  • Secondary Button: variant="outline", color="neutral"
  • Primary Button: type="submit"
  • Default Width: w-[150px] (overridden when hasButtonsBlock is true)
  • Container: <footer> element with flexbox layout

​
Layout Behavior

  • Default: Secondary on left, Primary on right
  • With isReverse: Primary on left, Secondary on right
  • With hasButtonsBlock: Buttons expand to fill available space (flex-auto)

​
Type Exports

type ButtonColor = InstanceType<typeof UButton>['$props']['color']
Source: /home/daytona/workspace/source/app/components/d/action-buttons/d-action-buttons.vue:97

Build docs developers (and LLMs) love

Get started for freeTalk to us