Skip to main content

component

TuxCommandBar

Standard horizontal action ribbon inspired by Microsoft Fluent 2 Command Bar and IBM Carbon Data Table Toolbar. Connects view switchers, instant search filters, primary/secondary action buttons, and bulk selection controls.

Interactive Component Playground

TuxCommandBar Workbench

Presets:
Properties Inspector3 configurable knobs
Selected Records CountselectedCount
Bar Densitydensity
Show Border Framebordered
true
Dynamic Component Syntax
<tux-command-bar :selectedCount="0" density="compact" bordered></tux-command-bar>

default state

Standard Action Ribbon

Houses primary actions, search filters, and view-mode segments. 

<TuxCommandBar>
  <template #actions>
    <TuxButton intent="primary" size="sm" icon="lucide:plus">New Corridor</TuxButton>
    <TuxButton intent="ghost" size="sm" icon="lucide:upload">Import Data</TuxButton>
    <TuxButton intent="ghost" size="sm" icon="lucide:download">Export</TuxButton>
  </template>
  <template #filter>
    <div class="relative">
      <UIcon name="lucide:search" class="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted" />
      <input type="search" placeholder="Filter corridors..." class="pl-8 pr-2.5 py-1 text-xs rounded bg-surface-raised border border-surface-border" />
    </div>
  </template>
</TuxCommandBar>

bulk operations

Selection Mode

When rows or cards are selected (selectedCount > 0), the command bar dynamically transforms into a batch action panel.

Simulate selection count:
<TuxCommandBar
  :selected-count="selectedItems.length"
  @clear-selection="selectedItems = []"
>
  <template #selection-actions>
    <TuxButton intent="secondary" size="sm" icon="lucide:file-output">Export Selected</TuxButton>
    <TuxButton intent="danger" size="sm" icon="lucide:trash-2">Batch Archive</TuxButton>
  </template>
</TuxCommandBar>