v2.5.3

ContentSearchButton

A pre-styled button that opens the content search modal.
GitHub
Button
Nuxt UI
This component is only available when the @nuxt/content module is installed.

Usage

The ContentSearchButton component is used to open the ContentSearch modal.

<template>
  <B24ContentSearchButton />
</template>

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

<template>
  <B24ContentSearchButton color="air-primary" />
</template>
The button defaults to color="air-secondary-no-accent" when not collapsed, color="air-tertiary-no-accent" when collapsed.

Collapsed

Use the collapsed prop to show the button's label and kbds. Defaults to true.

<template>
  <B24ContentSearchButton :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.

<template>
  <B24ContentSearchButton
    :collapsed="false"
    :kbds="{
      '0': 'alt',
      '1': 'O'
    }"
  />
</template>

API

Props

Prop Default Type
as'button'any

The element or component this component should render as when not a link.

iconicons.searchIconComponent

The icon displayed in the button.

labelt('contentSearchButton.label') string

The label displayed in the button.

color'air-tertiary-no-accent'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"

The color of the button.

collapsedtrueboolean

Whether the button is collapsed.

tooltipfalseboolean | TooltipProps

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)[] | KbdProps[]

The keyboard keys to display in the button. { accent: 'default' }

avatar AvatarProps

Display an avatar on the left side.

loadingboolean

When true, the loading icon will be displayed.

autofocus false | true | "true" | "false"
disabledboolean
name string
type'button' "reset" | "submit" | "button"

The type of the button when not a link.

isActionboolean

When true, uses special underlined styling.

activeColor"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"
size'md' "xs" | "md" | "xss" | "sm" | "lg" | "xl"
roundedfalseboolean

Rounds the corners of the button

blockfalseboolean

Render the button full width

loadingAutofalseboolean

Set loading state automatically based on the @click promise state

normalCasetrueboolean

Disable uppercase label

useWaitfalseboolean

Shows LoaderWaitIcon in loading mode

useClockfalseboolean

Shows LoaderClockIcon icon in loading mode

useDropdownfalseboolean

Shows icons.ChevronDownSIcon on the right side

b24ui { base?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; trailing?: ClassNameValue; } & { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }

Slots

Slot Type
leading{ b24ui: { base: (props?: Record<string, any> | undefined) => string; baseLoading: (props?: Record<string, any> | undefined) => string; baseLoadingWaitIcon: (props?: Record<string, any> | undefined) => string; baseLoadingClockIcon: (props?: Record<string, any> | undefined) => string; baseLoadingSpinnerIcon: (props?: Record<string, any> | undefined) => string; baseLine: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; labelInner: (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; safeList: (props?: Record<string, any> | undefined) => string; }; }
default{ b24ui: { base: (props?: Record<string, any> | undefined) => string; baseLoading: (props?: Record<string, any> | undefined) => string; baseLoadingWaitIcon: (props?: Record<string, any> | undefined) => string; baseLoadingClockIcon: (props?: Record<string, any> | undefined) => string; baseLoadingSpinnerIcon: (props?: Record<string, any> | undefined) => string; baseLine: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; labelInner: (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; safeList: (props?: Record<string, any> | undefined) => string; }; }
trailing{ b24ui: { base: (props?: Record<string, any> | undefined) => string; baseLoading: (props?: Record<string, any> | undefined) => string; baseLoadingWaitIcon: (props?: Record<string, any> | undefined) => string; baseLoadingClockIcon: (props?: Record<string, any> | undefined) => string; baseLoadingSpinnerIcon: (props?: Record<string, any> | undefined) => string; baseLine: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; labelInner: (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; safeList: (props?: Record<string, any> | undefined) => string; }; }

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/content/content-search-button.ts
export default {
  slots: {
    base: '',
    baseLine: '',
    label: '',
    trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
  },
  variants: {
    collapsed: {
      true: {
        baseLine: 'ps-[5px] pe-[5px]',
        label: 'hidden',
        trailing: 'lg:hidden'
      }
    }
  }
}

ContentSearch

A ready-to-use Command Palette component for your documentation.

ContentSurround

A pair of "Previous" and "Next" buttons for sequential page navigation.