Botón dividido.

<div class="ui-sample ui-actions" data-split-button><button class="btn btn--primary" type="button">Publicar</button><details class="ui-overlay-panel" data-dropdown-action><summary class="btn btn--secondary" aria-label="Más opciones de publicación">Más</summary><div><button type="button">Programar</button><button type="button">Guardar borrador</button></div></details></div>

<div class="ui-sample ui-actions border border-slate-300 bg-white p-4 text-slate-950" data-split-button><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Publicar</button><details class="ui-overlay-panel" data-dropdown-action><summary class="btn btn--secondary" aria-label="Más opciones de publicación">Más</summary><div><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Programar</button><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Guardar borrador</button></div></details></div>

import type { MouseEventHandler, ReactEventHandler } from "react";

export interface SplitButtonItem {
  label: string;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface SplitButtonProps {
  /** Texto de la acción principal. */
  label?: string;
  onClick?: MouseEventHandler<HTMLButtonElement>;
  /** Texto visible del `<summary>` que despliega las otras opciones. */
  triggerLabel?: string;
  /** Nombre accesible del mismo `<summary>` (`aria-label`); acompaña a `triggerLabel`. */
  triggerAriaLabel?: string;
  /** Acciones alternativas; sin ítems queda sólo la acción principal. */
  items?: SplitButtonItem[];
  /** Muestra las opciones desplegadas (atributo nativo `open` de `<details>`). */
  open?: boolean;
  /** Se llama cuando el menú de opciones se abre o se cierra. */
  onToggle?: ReactEventHandler<HTMLDetailsElement>;
  className?: string;
}

const SPLIT_BUTTON_ITEMS: SplitButtonItem[] = [
  { label: "Programar" },
  { label: "Guardar borrador" },
];

/**
 * Botón dividido: acción principal con un menú de variantes de la misma acción (publicar, programar, guardar borrador).
 *
 * El menú usa `<details>` nativo y se abre sin JavaScript; `open` lo muestra desplegado.
 *
 * @example <SplitButton label="Publicar" onClick={publicar} triggerLabel="Más" triggerAriaLabel="Más opciones de publicación" items={[{ label: "Programar", onClick: programar }]} />
 * @example <SplitButton open />
 */
export function SplitButton({
  label = "Publicar",
  onClick,
  triggerLabel = "Más",
  triggerAriaLabel = "Más opciones de publicación",
  items = SPLIT_BUTTON_ITEMS,
  open = false,
  onToggle,
  className,
}: SplitButtonProps) {
  return (
    <div className={["ui-actions", className].filter(Boolean).join(" ")} data-split-button>
      <button className="btn btn--primary" type="button" onClick={onClick}>{label}</button>
      {items.length ? (
        <details className="ui-overlay-panel" data-dropdown-action open={open} onToggle={onToggle}>
          <summary className="btn btn--secondary" aria-label={triggerAriaLabel}>{triggerLabel}</summary>
          <div>
            {items.map((item, indice) => (
              <button key={indice} type="button" disabled={item.disabled} onClick={item.onClick}>{item.label}</button>
            ))}
          </div>
        </details>
      ) : null}
    </div>
  );
}