← →

Split Button

The Split Button joins a primary action to an arrow button that opens a menu of secondary actions, built on the native Popover API (top layer, light dismiss, and ESC for free) and CSS anchor positioning. Use it when there is one dominant default action plus a set of less frequent alternatives, such as Save with options like Save as draft or Save and close. Agent-native layer: the component mirrors live state in stable data-pura-split-* attributes (disabled, loading, variant, open) and registers in window.__puraSplitButtons indexed by data-pura-id, letting agents enumerate, read, and drive each split button on the page without touching internals.

Preview

<pura-split-button id="salvar" variant="primary">
  Save
  <pura-menu-item slot="menu" data-action="rascunho">Save as draft</pura-menu-item>
  <pura-menu-item slot="menu" data-action="fechar">Save and close</pura-menu-item>
  <pura-menu-separator slot="menu"></pura-menu-separator>
  <pura-menu-item slot="menu" data-action="modelo">Save as template</pura-menu-item>
</pura-split-button>

<p id="status-salvar"></p>

<script type="module">
  import "/pura/lib/split-button.js";
  const btn = document.getElementById("salvar");
  const status = document.getElementById("status-salvar");
  btn.addEventListener("click", () => { status.textContent = "Document saved."; });
  btn.addEventListener("select", (e) => {
    status.textContent = "Action: " + e.target.getAttribute("data-action");
  });
</script>

Attributes

Attribute	Type	Default	Description
`variant`	string	primary	Visual style: primary, secondary, ghost, or danger.
`size`	string	md	Button size: sm, md, or lg.
`disabled`	boolean	false	Disables both buttons (primary and caret).
`loading`	boolean	false	Shows a spinner on the primary button and makes both inert.
`placement`	string	bottom	Side the menu opens on: bottom or top.
`label`	string	More actions	Accessible label for the caret button and the menu.
`open`	boolean	false	Reflects and controls the open state of the menu.
`full`	boolean	false	Makes the component take the full width, with the primary button expanding.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/split-button.js"></script>

JavaScript

import "./pura/lib/split-button.js";

Slots

defaulticonmenu

Events

clickselectopenclose