Vue DashboardSearchButton Component

Usage

The DashboardSearchButton component is used to open the DashboardSearch modal.

<template>
  <B24DashboardSearchButton />
</template>

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

<template>
  <B24DashboardSearchButton color="air-primary-success" />
</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 hide the button's label and kbds. Defaults to false.

collapsed

<template>
  <B24DashboardSearchButton />
</template>

When using the button in the DashboardSidebar component, use the collapsed slot prop directly.

Kbds

Use the kbds prop to display keyboard keys in the button. Defaults to ['meta', 'K'] to match the default shortcut of the DashboardSearch component.

collapsed

<template>
  <B24DashboardSearchButton
    :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.
`icon`	`icons.search`	`IconComponent` The icon displayed in the button.
`label`	`t('dashboardSearchButton.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.
`collapsed`	`false`	`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 `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.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`name`		`string`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`isAction`		`boolean` 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"`
`rounded`	`false`	`boolean` Rounds the corners of the button
`block`	`false`	`boolean` Render the button full width
`loadingAuto`	`false`	`boolean` Set loading state automatically based on the `@click` promise state
`normalCase`	`true`	`boolean` Disable uppercase label
`useWait`	`false`	`boolean` Shows LoaderWaitIcon in loading mode
`useClock`	`false`	`boolean` Shows LoaderClockIcon icon in loading mode
`useDropdown`	`false`	`boolean` 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; }

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

Slots

Slot	Type
`leading`	`{ b24ui: object; }`
`default`	`{ b24ui: object; }`
`trailing`	`{ b24ui: object; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    dashboardSearchButton: {
      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'
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        dashboardSearchButton: {
          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'
              }
            }
          }
        }
      }
    })
  ]
})

DashboardSearch

A ready-to-use CommandPalette component for your dashboard.

DashboardSidebar

A resizable and collapsible sidebar component for dashboards.