Usage
The DashboardSearchButton component is used to open the DashboardSearch modal.
<template>
<UDashboardSearchButton />
</template>
It extends the Button component, so you can pass any property such as color, variant, size, etc.
<template>
<UDashboardSearchButton 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 hide the button's label and kbds. Defaults to false.
<template>
<UDashboardSearchButton collapsed />
</template>
Kbds
Use the kbds prop to display keyboard keys in the button. Defaults to ['meta', 'K'] to match the default shortcut of the DashboardSearch component.
<template>
<UDashboardSearchButton :kbds="['alt', 'O']" />
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Theme
app.config.ts
export default defineAppConfig({
uiPro: {
dashboardSearchButton: {
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({
uiPro: {
dashboardSearchButton: {
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 uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
dashboardSearchButton: {
slots: {
base: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
}
}
}
})
]
})