Overlays

ContentSearchButton

A trigger button styled to open a `CommandPalette`, showing a placeholder and shortcut hint.

vue

<UiContentSearchButton />

Options

One block per prop — what it does, and what it looks like set.

Placeholder

Default — placeholder, paired with a CommandPalette

Purely a styled trigger — it has no open state of its own. You always wire its @click to open a separate CommandPalette yourself, and its placeholder is just displayed text — it doesn't automatically pass through to whatever it opens.

Shortcut

shortcut is the key hint shown on the right of the button. It's decoration only — the button doesn't bind anything, so register the real shortcut on whatever it opens.

Icon

icon is the glyph in the trigger, a magnifying glass by default. Change it only to match an icon set you already use for search elsewhere.

Collapsed

collapsed renders an icon-only square button, dropping the placeholder text and the shortcut hint — for a narrow header or a mobile bar.

Variant

outline is the ringed field that reads as a search input, and the right default wherever the trigger stands on its own. subtle is that same ring on a raised surface, matching a Card's own subtle, so the control belongs to the card it sits on. soft drops the ring for a plain fill. ghost shows nothing until hover, for a row of icon buttons where a ring on just this one would look out of place. It applies to collapsed buttons too.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop

Type

Default

Description

placeholder

string

'Search documentation...'

shortcut

string[]

['meta', 'k']

Keys shown as the keyboard shortcut hint, e.g. ['meta', 'k']. Pass an empty array to hide it. Purely visual — pair with a matching `shortcut` on the `CommandPalette` it opens to actually toggle it.

icon

string

'magnifyingGlass'

collapsed

boolean

false

Renders as an icon-only square button, hiding the placeholder text and shortcut hint.

variant

"outline" | "subtle" | "soft" | "ghost"

'outline'

The button's surface. `outline` is the ringed field on the page background that reads as a search input, which is what a docs header or a navbar wants. `subtle` is that same ring on a raised surface, matching a `Card`'s own `subtle`, so the trigger belongs to the card it sits on. `soft` drops the ring for a plain fill. `ghost` shows nothing until hover, for a row of icon buttons where a ring on just this one would look out of place. Applies to `collapsed` too: an icon-only button gets the same surface as a full-width one.

Types

type Variant = "outline" | "subtle" | "soft" | "ghost";