ContentSearchButton

A pre-styled Button to open the ContentSearch modal.

This component is only available when the @nuxt/content module is installed.

Usage

The ContentSearchButton component is used to open the ContentSearch modal.

<template>
  <UContentSearchButton />
</template>

It extends the Button component, so you can pass any property such as color, variant, size, etc.

<template>
  <UContentSearchButton variant="subtle" />
</template>

The button defaults to color="neutral" and variant="outline" when not collapsed, variant="ghost" when collapsed.

Collapsed

Use the collapsed prop to show the button's label and kbds. Defaults to true.

collapsed

<template>
  <UContentSearchButton :collapsed="false" />
</template>

Kbds

Use the kbds prop to display keyboard keys in the button. Defaults to ['meta', 'K'] to match the default shortcut of the ContentSearch component.

collapsed

<template>
  <UContentSearchButton :collapsed="false" :kbds="['alt', 'O']" />
</template>

API

Props

Prop	Default	Type
`icon`	`appConfig.ui.icons.search`	`string \| object` The icon displayed in the button.
`label`	`t('contentSearchButton.label')`	`string` The label displayed in the button.
`color`	`'neutral'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` The color of the button.
`variant`		`"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"` The variant of the button. Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
`size`		`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`collapsed`	`true`	`boolean` Whether the button is collapsed.
`tooltip`	`false`	`boolean \| TooltipProps` Display a tooltip on the button when is collapsed with the button label. This has priority over the global `tooltip` prop.
`kbds`	`["meta", "k"]`	`(string \| undefined)[] \| KbdProps[]` The keyboard keys to display in the button. `{ variant: 'subtle' }`
`ui`		`{ base?: ClassNameValue; trailing?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }`

Slots

Slot	Type
`leading`	`{}`
`default`	`{}`
`trailing`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    contentSearchButton: {
      slots: {
        base: '',
        trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        contentSearchButton: {
          slots: {
            base: '',
            trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
          }
        }
      }
    })
  ]
})

Changelog

3173b — fix: proxySlots reactivity (#4969)

61b60 — feat: allow passing a component instead of a name (#4766)

5cb65 — feat: import @nuxt/ui-pro components

ContentSearch

A ready to use CommandPalette to add to your documentation.

ContentSurround

A pair of prev and next links to navigate between pages.