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>
color="neutral" and variant="outline" when not collapsed, variant="ghost" when collapsed.Use the collapsed prop to show the button's label and kbds. Defaults to true.
<template>
<UContentSearchButton :collapsed="false" />
</template>
Use the kbds prop to display keyboard keys in the button. Defaults to ['meta', 'K'] to match the default shortcut of the ContentSearch component.
<template>
<UContentSearchButton :collapsed="false" :kbds="['alt', 'O']" />
</template>
| Prop | Default | Type |
|---|---|---|
as | 'button' | anyThe element or component this component should render as when not a link. |
icon | appConfig.ui.icons.search | string | objectThe icon displayed in the button. |
label | t('contentSearchButton.label') | stringThe label displayed in the button. |
color | 'neutral' | "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"The color of the button. |
variant | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"The variant of the button. Defaults to 'outline' when not collapsed, 'ghost' when collapsed. | |
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
|
kbds | ["meta", "k"] | (string | undefined)[] | KbdProps[]The keyboard keys to display in the button.
|
to | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGenericRoute Location the link should navigate to when clicked on.
| |
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
name | string | |
type | 'button' | "reset" | "submit" | "button"The type of the button when not a link. |
download | any | |
hreflang | string | |
media | string | |
ping | string | |
target | null | string & {} | "_blank" | "_parent" | "_self" | "_top"Where to display the linked URL, as the name for a browsing context. | |
referrerpolicy | "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | |
active | boolean Force the link to be active independent of the current route. | |
trailingSlash | "append" | "remove"An option to either add or remove trailing slashes in the | |
activeColor | "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | |
activeVariant | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link" | |
size | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
square | boolean Render the button with equal padding on all sides. | |
block | boolean Render the button full width. | |
loadingAuto | boolean Set loading state automatically based on the | |
avatar | AvatarPropsDisplay an avatar on the left side.
| |
leading | boolean When | |
leadingIcon | string | objectDisplay an icon on the left side. | |
trailing | boolean When | |
trailingIcon | string | objectDisplay an icon on the right side. | |
loading | boolean When | |
loadingIcon | appConfig.ui.icons.loading | string | objectThe icon when the |
ui | { base?: ClassNameValue; label?: ClassNameValue; trailing?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }
|
| Slot | Type |
|---|---|
leading | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
default | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
trailing | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
export default defineAppConfig({
ui: {
contentSearchButton: {
slots: {
base: '',
label: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
},
variants: {
collapsed: {
true: {
label: 'hidden',
trailing: 'lg:hidden'
}
}
}
}
}
})
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: '',
label: '',
trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
},
variants: {
collapsed: {
true: {
label: 'hidden',
trailing: 'lg:hidden'
}
}
}
}
}
})
]
})