v2.5.3

DashboardSearchButton

A pre-styled button that opens the DashboardSearch modal.
GitHub
Button
Nuxt UI

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.

<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.

<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.

iconicons.searchIconComponent

The icon displayed in the button.

labelt('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.

collapsedfalseboolean

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; }
This component also supports all native <button> HTML attributes.

Slots

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

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/dashboard-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'
      }
    }
  }
}

DashboardSearch

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

DashboardSidebar

A resizable and collapsible sidebar component for dashboards.