UIModalFooter

UIModalFooter

A footer component designed for use within UIModal components, providing a consistent layout for action buttons and additional content.

<template>
  <UIModal v-model:show="showModal">
    <UIModalHeader title="Save Changes" />

    <div class="p-6">
      Modal content
    </div>

    <UIModalFooter
      :align="'right'"
      :bordered="true"
      :showDivider="true"
    >
      <template #default>
        <UIButton
          type="default"
          @click="handleCancel"
        >
          Cancel
        </UIButton>
        <UIButton
          type="primary"
          :loading="saving"
          @click="handleSave"
        >
          Save Changes
        </UIButton>
      </template>

      <template #extra>
        <UIButton
          type="text"
          size="small"
        >
          Need Help?
        </UIButton>
      </template>
    </UIModalFooter>
  </UIModal>
</template>

<script setup lang="ts">
const showModal = ref(false)
const saving = ref(false)

const handleCancel = () => {
  showModal.value = false
}

const handleSave = async () => {
  saving.value = true
  try {
    // Save changes
    showModal.value = false
  } finally {
    saving.value = false
  }
}
</script>

Props

• align (‘left’ | ‘center’ | ‘right’): Button alignment
• bordered (boolean): Show top border
• showDivider (boolean): Show divider above footer
• padding (string): Custom padding
• gutter (number): Space between buttons
• reverse (boolean): Reverse button order
• sticky (boolean): Stick to bottom
• transparent (boolean): Transparent background

Slots

• default: Action buttons
• extra: Additional content
• divider: Custom divider content

Usage Examples

1. Basic Footer:

<template>
  <UIModalFooter>
    <UIButton @click="cancel">
      Cancel
    </UIButton>
    <UIButton type="primary" @click="confirm">
      Confirm
    </UIButton>
  </UIModalFooter>
</template>

2. Footer with Extra Content:

<template>
  <UIModalFooter align="right">
    <template #extra>
      <div class="flex items-center space-x-2">
        <InfoIcon class="w-4 h-4" />
        <span class="text-sm text-gray-500">
          Changes will be saved automatically
        </span>
      </div>
    </template>

    <UIButton type="primary">
      Continue
    </UIButton>
  </UIModalFooter>
</template>

3. Centered Footer with Multiple Actions:

<template>
  <UIModalFooter
    align="center"
    :gutter="16"
  >
    <UIButton type="default">
      Back
    </UIButton>
    <UIButton type="primary">
      Next
    </UIButton>
    <UIButton type="link">
      Skip
    </UIButton>
  </UIModalFooter>
</template>

4. Sticky Footer:

<template>
  <UIModalFooter
    :sticky="true"
    :bordered="true"
    class="bg-white"
  >
    <UIButton type="default">
      Cancel
    </UIButton>
    <UIButton
      type="primary"
      :loading="saving"
    >
      Save Changes
    </UIButton>
  </UIModalFooter>
</template>

Best Practices

1. Button Layout:

   • Align buttons consistently
   • Order by importance
   • Group related actions
   • Consider button hierarchy

2. Visual Design:

   • Use appropriate spacing
   • Show clear separation
   • Maintain visual balance
   • Consider mobile views

3. Interaction:

   • Handle loading states
   • Prevent double submission
   • Support keyboard navigation
   • Provide feedback

4. Accessibility:

   • Use descriptive labels
   • Support keyboard focus
   • Maintain tab order
   • Consider screen readers

5. Responsive Design:

   • Stack buttons on mobile
   • Adjust spacing as needed
   • Handle long labels
   • Maintain touch targets