Split Button

#Basic usage

split-button/basic Vue React

Nothing chosen yet.

split-button/basic.vue

<script setup lang="ts">
import { SplitButton } from "@bysages/vue";
import { ref } from "vue";

const status = ref("Nothing chosen yet.");
const items = [
  { label: "Save as…", value: "save-as" },
  { label: "Export…", value: "export" },
  { label: "Delete draft", value: "delete", danger: true },
];
</script>

<template>
  <div>
    <SplitButton
      label="Save"
      :items="items"
      @click="status = 'Saved.'"
      @select="(value: string) => (status = `Chose ${value}`)"
    />
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ status }}
    </p>
  </div>
</template>

split-button/outline Vue React

Nothing chosen yet.

split-button/outline.vue

<script setup lang="ts">
import { SplitButton } from "@bysages/vue";
import { ref } from "vue";

const status = ref("Nothing chosen yet.");
const items = [
  { label: "Export as PDF", value: "pdf" },
  { label: "Export as CSV", value: "csv" },
  { label: "Export as JSON", value: "json" },
];
</script>

<template>
  <div>
    <SplitButton
      label="Export"
      variant="outline"
      size="sm"
      :items="items"
      @click="status = 'Exported.'"
      @select="(value: string) => (status = `Chose ${value}`)"
    />
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ status }}
    </p>
  </div>
</template>

#Props

#SplitButton

A primary action with its alternatives one seam away: the main button fires click, the fitted arrow opens a paper vessel of the same register whose entries emit select with their value. The arrow is the menu machine's trigger grafting our button via asChild — the machine keeps the element (positioning, focus, data-state), the button recipe dresses it. The popup keeps the menu parts untouched.

Prop	Type	Default	Description
`label`	`String`		The main action's label.
`items`	`Array as PropType<SplitButtonEntry[]>`	`() => []`	The dropdown's entries.
`variant`	`String`	`"solid"`	How both halves rest; the arrow always reads as one control with the main button.
`tone`	`String`	`"ink"`	The pigment the halves are inked with; ink is the solemn default, and the fixed pigments speak for their meaning.
`size`	`String`	`"md"`	One rung of the control-height ladder for both halves.
`disabled`	`Boolean`	`false`	—