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.
`color`	`'neutral'`	`"neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error"` The color of the button.
`kbds`	`["meta", "k"]`	`string[] \| PKbdProps[]` The keyboard keys to display in the button. `{ variant: 'subtle' }`
`icon`	`appConfig.pohon.icons.search`	`string \| object` The icon displayed in the button.
`label`	`t('contentSearchButton.label')`	`string` The label displayed in the button.
`variant`		`"solid" \| "outline" \| "soft" \| "subtle" \| "ghost" \| "link"` The variant of the button. Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
`autofocus`		`false \| true \| "true" \| "false"`
`name`		`string`
`type`	`'button'`	`"button" \| "submit" \| "reset"` The type of the button when not a link.
`activeColor`		`"neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error"`
`activeVariant`		`"solid" \| "outline" \| "soft" \| "subtle" \| "ghost" \| "link"`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`avatar`		`PAvatarProps` Display an avatar on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`trailingIcon`		`string \| object` Display an icon on the right side.
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`collapsed`	`true`	`boolean` Whether the button is collapsed.
`tooltip`	`false`	`boolean` Display a tooltip on the button when is collapsed with the button label. This has priority over the global `tooltip` prop.
`disabled`		`boolean`
`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
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`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>) => string; label: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }`
`default`	`{ pohon: { base: (props?: Record<string, any>) => string; label: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }`
`trailing`	`{ pohon: { base: (props?: Record<string, any>) => string; label: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => 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.