Open experiment
Neon split action button
A production split control for one frequent action and three alternate launch modes. The menu supports arrows, Home, End, Escape, outside dismissal, focus return, and clear selection feedback.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-neon-split">
<div class="cmp-neon-split__control">
<button type="button" class="cmp-neon-split__main">
<i aria-hidden="true"></i><span>Launch preview</span>
</button>
<button
type="button"
class="cmp-neon-split__toggle"
aria-label="Choose launch mode"
aria-haspopup="menu"
aria-expanded="false"
>
<span aria-hidden="true">⌄</span>
</button>
</div>
<div class="cmp-neon-split__menu" role="menu" hidden>
<button type="button" role="menuitem" data-mode="Launch preview">
<span aria-hidden="true">◇</span><b>Preview</b><small>Private sandbox</small>
</button>
<button type="button" role="menuitem" data-mode="Launch staged build">
<span aria-hidden="true">◐</span><b>Staged build</b><small>Team review URL</small>
</button>
<button type="button" role="menuitem" data-mode="Launch production">
<span aria-hidden="true">↗</span><b>Production</b><small>Public release</small>
</button>
</div>
<span class="cmp-neon-split__status" aria-live="polite">Preview mode ready</span>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The default action and disclosure are separate native buttons.
- Alternate actions use menu roles and arrow-key navigation.
- Escape closes the menu and restores focus to the disclosure.
License: MIT License for open-source use, modification, and distribution.