# Command Palette Empty

## Usage

Empty state display for the results area. Rendered automatically by `CommandPalette` for no-results and no-query states.

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

## Examples

Common configurations, variations, and states.

### Basic

A command palette with no results, showing a custom empty message via emptyBootstrapText. Use to explain why the palette is empty and what the user can do next.

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

const source = createStaticSource<SearchableItem>([])
</script>

<template>
  <CommandPalette
    empty-bootstrap-text="No commands available"
    is-inline
    is-open
    :search-source="source"
  />
</template>
```

## Props

`CommandPaletteEmpty` takes no props.

## Slots

- `default`: the empty message. `CommandPalette` fills it with `emptySearchText` or `emptyBootstrapText`, depending on whether the user has typed anything.