---
url: "https://vueda.dev/v3/reference/theming/keys/CommandFooter.md"
title: "CommandFooter"
---

# CommandFooter

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The optional chin below [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root). Sits at `--vueda-cmd-footer-height` (32px) on `--muted` with a top hairline, holding keyboard-navigation hints on the leading edge and custom action labels on the trailing edge; supporting-size copy on `--muted-foreground` reads as status rather than primary chrome.

Vue component: [CommandFooter](/v3/reference/api/vue/CommandFooter.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-root) | `flex h-[var(--vueda-cmd-footer-height)] items-center justify-between gap-3 border-t-hairline bg-muted px-[var(--vueda-control-px-md)] text-[length:var(--vueda-text-supporting)] text-muted-foreground` | The optional chin below [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root). Sits at `--vueda-cmd-footer-height` (32px) on `--muted` with a top hairline, holding keyboard-navigation hints on the leading edge and custom action labels on the trailing edge; supporting-size copy on `--muted-foreground` reads as status rather than primary chrome. |
| [hints](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-hints) | `inline-flex items-center gap-3` | The hints cluster inside a [CommandFooter.root](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-root). Inline-flex row with a 12px gap so consecutive keycap-plus-label pairs (`↑↓ navigate`, `↵ select`, `Esc close`) sit as one readable strip rather than collapsing into a run-on glyph soup. |
| [hint](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-hint) | `inline-flex items-center gap-1.5` | A single Kbd-plus-label pair inside [CommandFooter.hints](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-hints). Tighter 6px inner gap pairs the keycap with its trailing label so the pair reads as one unit against the wider gap between sibling hints. |

<a id="theme-key-CommandFooter-root"></a>

## root

> The optional chin below [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root). Sits at `--vueda-cmd-footer-height` (32px) on `--muted` with a top hairline, holding keyboard-navigation hints on the leading edge and custom action labels on the trailing edge; supporting-size copy on `--muted-foreground` reads as status rather than primary chrome.

Default classes:

`flex h-[var(--vueda-cmd-footer-height)] items-center justify-between gap-3 border-t-hairline bg-muted px-[var(--vueda-control-px-md)] text-[length:var(--vueda-text-supporting)] text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/controls/CommandFooter.theme.js:18`

<a id="theme-key-CommandFooter-hints"></a>

## hints

> The hints cluster inside a [CommandFooter.root](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-root). Inline-flex row with a 12px gap so consecutive keycap-plus-label pairs (`↑↓ navigate`, `↵ select`, `Esc close`) sit as one readable strip rather than collapsing into a run-on glyph soup.

Default classes:

`inline-flex items-center gap-3`

Source: `client/lib/theme/vueda-tailwind/controls/CommandFooter.theme.js:25`

<a id="theme-key-CommandFooter-hint"></a>

## hint

> A single Kbd-plus-label pair inside [CommandFooter.hints](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-hints). Tighter 6px inner gap pairs the keycap with its trailing label so the pair reads as one unit against the wider gap between sibling hints.

Default classes:

`inline-flex items-center gap-1.5`

Source: `client/lib/theme/vueda-tailwind/controls/CommandFooter.theme.js:27`