# Command Palette Footer

## Usage

`CommandPalette` renders `CommandPaletteFooter` automatically. Pass a `CommandPaletteFooter` to the `footer` slot only when replacing the default guidance.

```ts
import { CommandPaletteFooter } from '@astryx-vue/core/CommandPalette'
```

### Anatomy

- **Footer**: Supporting region that presents default guidance or caller-provided footer content.
- **Keyboard shortcut**: Default Kbd badges for navigation, selection, and dismissal.

## Examples

Common configurations, variations, and states.

### Basic

A command palette footer with no children, rendering the built-in keyboard navigation hints. Use CommandPaletteFooter without content to get the default arrow-key, Enter, and Esc hints below the results list.

```vue
<script setup lang="ts">
import { createStaticSource } from '@astryx-vue/core'
import { CommandPalette, CommandPaletteFooter } from '@astryx-vue/core/CommandPalette'

const source = createStaticSource([
  { id: 'new-file', label: 'New File' },
  { id: 'open-recent', label: 'Open Recent' },
  { id: 'save-all', label: 'Save All' },
])
</script>

<template>
  <CommandPalette is-inline is-open :search-source="source">
    <template #footer>
      <CommandPaletteFooter />
    </template>
  </CommandPalette>
</template>
```

## Props

`CommandPaletteFooter` takes no props.

## Slots

- `default`: replaces the three default hints. With no content, the footer shows the Navigate, Select, and Close hints, with `↑` `↓`, `↵`, and `Esc` badges. The text comes from the locale messages, so it is translated for you.