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>
  <PContentSearchButton />
</template>

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

<template>
  <PContentSearchButton 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>
  <PContentSearchButton :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>
  <PContentSearchButton :collapsed="false" :kbds="['alt', 'O']" />
</template>

API

Props

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`icon`	`appConfig.pohon.icons.search`	`string \| object` The icon displayed in the button.
`label`	`t('contentSearchButton.label')`	`string` The 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 \| PTooltipProps` 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)[] \| PKbdProps[]` The keyboard keys to display in the button. `{ variant: 'subtle' }`
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`name`		`string`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`activeColor`		`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"`
`activeVariant`		`"solid" \| "outline" \| "soft" \| "subtle" \| "ghost" \| "link"`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "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 `@click` promise state
`avatar`		`PAvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`trailingIcon`		`string \| object` Display an icon on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`pohon`		`{ base?: ClassValue; label?: ClassValue; trailing?: ClassValue; } & { base?: ClassValue; label?: ClassValue; leadingIcon?: ClassValue; leadingAvatar?: ClassValue; leadingAvatarSize?: ClassValue; trailingIcon?: ClassValue; }`

This component also supports all native <button> HTML attributes.

Slots

Slot	Type
`leading`	`{ pohon: { 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`	`{ pohon: { 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`	`{ pohon: { 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; }; }`

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PContentSearchButton. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    contentSearchButton: {
      slots: {
        base: '',
        label: '',
        trailing: ''
      },
      variants: {
        collapsed: {
          true: {
            label: '',
            trailing: ''
          }
        }
      }
    }
  }
};

vite.config.ts

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

export default defineAppConfig({
  pohon: {
    contentSearchButton: {
      slots: {
        base: '',
        label: '',
        trailing: ''
      },
      variants: {
        collapsed: {
          true: {
            label: '',
            trailing: ''
          }
        }
      }
    }
  }
};

Changelog

No recent changes

ContentSearch

A ready to use CommandPalette to add to your documentation.

ContentSurround

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