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>
color="neutral" and variant="outline" when not collapsed, variant="ghost" when collapsed.Use the collapsed prop to hide the button's label and kbds. Defaults to false.
<template>
<UDashboardSearchButton collapsed />
</template>
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>
| Prop | Default | Type |
|---|---|---|
icon |
|
The icon displayed in the button. |
label |
|
The label displayed in the button. |
color |
|
The color of the button. |
variant |
The variant of the button. Defaults to 'outline' when not collapsed, 'ghost' when collapsed. | |
size |
| |
collapsed |
|
Whether the button is collapsed. |
tooltip |
|
Display a tooltip on the button when is collapsed with the button label.
This has priority over the global
|
kbds |
|
The keyboard keys to display in the button.
|
ui |
|
| Slot | Type |
|---|---|
leading |
|
default |
|
trailing |
|
export default defineAppConfig({
ui: {
dashboardSearchButton: {
slots: {
base: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
dashboardSearchButton: {
slots: {
base: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
}
}
}
})
]
})