Components

ButtonBar

Action buttons with overflow menu, optional options dropdown, and tooltips.

Usage

Loading preview...

<template>
  <MeButtonBar
    :actions="actions"
    :options="options"
  />
</template>

<script setup lang="ts">
const actions = [
  { label: 'Action A', description: 'Action A description', icon: 'i-lucide-plus', onClick: () => alert('Action A clicked') },
  { label: 'Action B', icon: 'i-lucide-calendar', to: 'https://example.com' },
  { label: 'Action C', icon: 'i-lucide-message-square', to: '/components' },
  { label: 'Action D', icon: 'i-lucide-message-square', onClick: () => alert('Action D clicked') },
  { label: 'Action E', disabled: true },
  { label: 'Action F', loading: true }
]
const options = [
  { label: 'Option A', icon: 'i-lucide-ban', onSelect: () => alert('Option A clicked') },
  { label: 'Option B', icon: 'i-lucide-book-open', to: '/components' }
]
</script>

Actions

Configure primary actions for the toolbar row.

type ButtonBarAction = {
  label?: string;
  class?: string;
  color?: string;
  variant?: string;
  icon?: string;
  disabled?: boolean;
  loading?: boolean;
  to?: string;
  target?: string;
  description?: string;
  placement?: 'top' | 'right' | 'bottom' | 'left';
  onClick?: () => void;
};

Color

Set color on the bar as the default for all buttons and menu triggers, or set color on an action object to override the bar default for that button only.

<template>
  <MeButtonBar
    color="neutral"
    :actions="[
      { label: 'Primary', color: 'primary' },
      { label: 'Neutral', color: 'neutral' },
      { label: 'Error', color: 'error' },
      { label: 'Success', color: 'success' },
      { label: 'Warning', color: 'warning' }
    ]"
    :options="[
      { label: 'Submenu A' },
      { label: 'Submenu B' }
    ]"
  />
</template>

Variant

Set variant on the bar as the default for all buttons and menu triggers, or set variant on an action object to override the bar default for that button only.

<template>
  <MeButtonBar
    variant="ghost"
    :actions="[
      { label: 'Action A' },
      { label: 'Action B', variant: 'outline' }
    ]"
    :options="[{ label: 'Option A' }]"
  />
</template>

Size

size accepts sm, md, or lg.

<template>
  <div>
    <MeButtonBar size="sm" :actions="actions" :options="options" />
    <hr class="w-full border-default my-4" />
    <MeButtonBar size="md" :actions="actions" :options="options" />
    <hr class="w-full border-default my-4" />
    <MeButtonBar size="lg" :actions="actions" :options="options" />
  </div>
</template>

<script setup lang="ts">
const actions = [
  { label: 'Action A', icon: 'i-lucide-arrow-up-right' },
  { label: 'Action B', icon: 'i-lucide-calendar' },
  { label: 'Action C', icon: 'i-lucide-message-square' },
  { label: 'Action D', icon: 'i-lucide-ban' }
]
const options = [
  { label: 'Option A', icon: 'i-lucide-ban' },
  { label: 'Option B', icon: 'i-lucide-book-open', to: '/components' }
]
</script>

Responsive behavior

With visibleActions at 0 (default), the bar hides primary buttons into More actions as the container runs out of space.

Visible actions

If visibleActions is greater than zero, that many actions stay visible; the rest go to More actions.

<template>
  <MeButtonBar
    :visibleActions="2"
    :actions="[
      { label: 'Action A' },
      { label: 'Action B' },
      { label: 'Action C' }
    ]"
    :options="[{ label: 'Option A' }]"
  />
</template>

Max visible actions

When visibleActions is 0, maxVisibleActions caps how many primary buttons can show before the rest go to overflow (the bar still reacts to container width).

<template>
  <MeButtonBar
    :maxVisibleActions="2"
    :actions="[
      { label: 'Action A' },
      { label: 'Action B' },
      { label: 'Action C' },
      { label: 'Action D' }
    ]"
    :options="[{ label: 'Option A' }]"
  />
</template>

Tooltips

Use description for tooltip text on primary buttons. placement sets the tooltip side: top, right, bottom, or left.

<template>
  <MeButtonBar
    :actions="[
      { label: 'Plain', description: 'Plain tooltip' },
      { label: 'Placement', description: 'Right', placement: 'right' }
    ]"
    :options="[{ label: 'Option A' }]"
  />
</template>

Links (to, target)

to — navigation URL; opens in the same tab by default.
target — _self or _blank to control tab behavior.

<template>
  <MeButtonBar
    :actions="[
      { label: 'Docs', to: '/components' },
      { label: 'External', to: 'https://example.com', target: '_blank' },
      { label: 'External same tab', to: 'https://example.com', target: '_self' }
    ]"
    :options="[{ label: 'Option A' }]"
  />
</template>

Default slot

The default slot sits between More actions and Options.

<template>
  <MeButtonBar
    :maxVisibleActions="3"
    :actions="[
      { label: 'Action A' },
      { label: 'Action B' },
      { label: 'Action C' },
      { label: 'Action D' }
    ]"
    :options="[{ label: 'Option A' }]"
  >
    <div class="w-full rounded px-2 py-1 min-h-8 bg-elevated">
      <p class="text-sm text-default">Extra content (tabs, filters, etc.)</p>
    </div>
  </MeButtonBar>
</template>

API

Props

Prop	Default	Type
`actions`	`[]`	`ButtonBarAction[]` Primary actions in the toolbar row.
`color`	`'primary'`	`ButtonProps['color']` Default color for bar buttons and menu triggers — same as `color` on Nuxt UI Button.
`variant`	`'outline'`	`ButtonProps['variant']` Default variant for bar buttons and menu triggers — same as `variant` on Nuxt UI Button.
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` Size for all bar buttons and menu triggers.
`visibleActions`	`0`	`number` How many primary actions stay visible; `0` enables responsive overflow.
`maxVisibleActions`		`number` Maximum primary actions shown before overflow when `visibleActions` is `0`.
`options`	`[]`	`DropdownMenuItem[]` Options menu items — same type as `items` on Nuxt UI DropdownMenu.

Slots

Slot	Type
`default`	`{}` Content between More actions and Options.

Usage

Learn how to use EletroDS Vue 3 components in your application.

CriterionInput

A component used to compose and edit filters.