SplitButton

Button with a menu half

One main action with related variants a click away — Save / Save as…, Merge / Squash. If the choices are equal, use a DropdownMenu or separate buttons.

Basic

Save as…⇧⌘S

Save all

Discard

Save as…⇧⌘S

Save all

Discard

<script setup lang="ts">
import { BlessSplitButton, useToast } from "blessing-ui";
const { toast } = useToast();
const items = [
  { label: "Save as…", value: "as", shortcut: "⇧⌘S" },
  { label: "Save all", value: "all" },
  { type: "separator" as const },
  { label: "Discard", value: "discard", danger: true },
];
</script>

<template>
  <div class="row">
    <BlessSplitButton
      label="Save"
      :items
      @click="toast('Saved')"
      @select="toast('label' in $event ? $event.label : '')"
    />
    <BlessSplitButton
      label="Export"
      variant="outline"
      size="sm"
      :items
      @click="toast('Exported')"
      @select="toast('label' in $event ? $event.label : '')"
    />
  </div>
</template>

• The main part fires @click; the arrow opens the menu (items, @select) and is named by menuLabel.
• color, variant, size, disabled and loading apply to both halves.

Usage

import { BlessSplitButton } from "blessing-ui";

API

Props

Name	Type	Default	Description
label*	string	—
items*	BlessMenuItem[]	—
color	"text" | "accent" | "danger"	"text"
variant	"solid" | "outline"	"solid"
size	"md" | "sm" | "lg"	"md"
disabled	boolean	—
loading	boolean	—
menuLabel	string	"More actions"

Events

Name	Payload	Description
select	[item: BlessMenuItem]
click	[e: MouseEvent]

Slots

Name	Scope	Description
default	—