CommandBar

Floating glass toolbar of icon actions, with separators. The size prop (xs, sm, md, lg, xl) sets the button size and toolbar padding.

Jump to API reference

Import

Vue

import { UiCommandBar } from '@ziyarago/ui/vue'

Toolbar

Vue

<UiCommandBar
  :items="[{ id: 'edit', label: 'Edit', icon: 'pencil' }, { id: 'copy', label: 'Copy', icon: 'copy' }, { separator: true }, { id: 'share', label: 'Share', icon: 'share' }, { id: 'del', label: 'Delete', icon: 'trash', disabled: true }]"
 />

Sizes

Vue

<UiCommandBar
  size="xs"
  :items="[{ id: 'edit', label: 'Edit', icon: 'pencil' }, { id: 'copy', label: 'Copy', icon: 'copy' }, { separator: true }, { id: 'share', label: 'Share', icon: 'share' }]"
 />

<UiCommandBar
  size="sm"
  :items="[{ id: 'edit', label: 'Edit', icon: 'pencil' }, { id: 'copy', label: 'Copy', icon: 'copy' }, { separator: true }, { id: 'share', label: 'Share', icon: 'share' }]"
 />

<UiCommandBar
  size="md"
  :items="[{ id: 'edit', label: 'Edit', icon: 'pencil' }, { id: 'copy', label: 'Copy', icon: 'copy' }, { separator: true }, { id: 'share', label: 'Share', icon: 'share' }]"
 />

<UiCommandBar
  size="lg"
  :items="[{ id: 'edit', label: 'Edit', icon: 'pencil' }, { id: 'copy', label: 'Copy', icon: 'copy' }, { separator: true }, { id: 'share', label: 'Share', icon: 'share' }]"
 />

<UiCommandBar
  size="xl"
  :items="[{ id: 'edit', label: 'Edit', icon: 'pencil' }, { id: 'copy', label: 'Copy', icon: 'copy' }, { separator: true }, { id: 'share', label: 'Share', icon: 'share' }]"
 />

API reference

Floating glass toolbar of icon buttons; use for selection actions or editor tools.

Props

PropType and valuesDefaultDescription

items{ id: string; icon?: string; label: string; disabled?: boolean; separator?: boolean }[]'[]'Buttons. label is the tooltip and aria-label, icon defaults to "circle", separator true draws a divider.

sizexssmmdlgxl'md'Scale of button size and padding.

Events

Vue: @name. React: onName.

actionCalled with the item id when a button is clicked.