# be-buttoned-up

> Give button dropdown abilities.

Latest version **0.0.6** (published 2026-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-buttoned-up
pnpm add be-buttoned-up
yarn add be-buttoned-up
bun add be-buttoned-up
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2026-09-26 |
| First published | 2023-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web components, web component, custom elements, custom element, enhancement, behavior |

## Links

- npm: https://www.npmjs.com/package/be-buttoned-up
- Repository: https://github.com/bahrus/be-buttoned-up
- Homepage: https://github.com/bahrus/be-buttoned-up#readme
- Issues: https://github.com/bahrus/be-a-beacon/issues
- npm.io page: https://npm.io/package/be-buttoned-up

## Dependencies (4)

- [be-hive](https://npm.io/package/be-hive.md) 0.1.18
- [mount-observer](https://npm.io/package/mount-observer.md) 0.1.53
- [roundabout-lib](https://npm.io/package/roundabout-lib.md) 0.0.38
- [assign-gingerly](https://npm.io/package/assign-gingerly.md) 0.0.97

## Recent versions

- 0.0.6 (latest) — 2026-09-26
- 0.0.5 — 2026-08-26
- 0.0.3 — 2025-01-05
- 0.0.2 — 2024-01-08
- 0.0.1 — 2023-07-24
- 0.0.0 — 2023-07-17

## README

# be-buttoned-up (🧥)

[![Playwright Tests](https://github.com/bahrus/be-buttoned-up/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-buttoned-up/actions/workflows/CI.yml)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-buttoned-up?style=for-the-badge)](https://bundlephobia.com/result?p=be-buttoned-up)
<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-buttoned-up?compression=gzip">
<a href="https://nodei.co/npm/be-buttoned-up/"><img src="https://nodei.co/npm/be-buttoned-up.png"></a>

Allow a button to delegate to a sub menu of command buttons to select from.

```html
<button popovertarget=menu be-buttoned-up>&#9776;</button>

<menu id=menu>
    <button value=doSomething>Do something</button>
</menu>
```

What this does:

1.  Listens for click events on buttons inside menu when it is opened.
2.  Sets the "value" property of the anchoring button element to the value of the clicked button in the popup ("doSomething").
3.  Closes the popup when such a button is clicked.
3.  The anchoring button emits event "change" whenever a value is selected/changed.

Reference:  https://developer.chrome.com/blog/introducing-popover-api/

## Programmatic Attachment (No Attributes)

In client-side-rendered apps, setting attributes is clumsy. The enhancement can be attached without any attribute at all. First register its config once via `def.js`:

```JS
import { defBeButtonedUp } from 'be-buttoned-up/def.js';
const emc = await defBeButtonedUp(document.body); // or a shadow root's host, for a scoped registry
```

### Declarative -- via `enh.set`

```JS
// only the first write needs to go through .set -- it triggers attachment
button.enh.set.beButtonedUp.eventName = 'click';
```

This is order-independent: `.set` may be used *before* `defBeButtonedUp` has registered the config; the spawn is deferred until it does.

### Imperative -- via `enh.get()`

```JS
const beButtonedUp = button.enh.get(emc);
```

Either way, the button must still point at its menu via `popovertarget` (or the `popoverTargetElement` property). See [demo/Programmatic/](demo/Programmatic/) for runnable examples.

## Viewing Demos Locally

1. Install git
2. Fork/clone this repo
3. Install node.js
4. Open command window to the folder where you cloned this repo
5. `git submodule add https://github.com/bahrus/types.git types`
6. `git submodule update --init --recursive`
7. `npm install`
8. `npm run build`
9. `npm run serve`
10. Open http://localhost:8000/demo/ in a Chromium-based browser


## Using from ESM Module:

```JavaScript
import 'be-buttoned-up/be-buttoned-up.js';
```

## Using from CDN:

```html
<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-buttoned-up';
</script>
```

---
_Source: https://npm.io/package/be-buttoned-up · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._