Components / Split Button

Split Button

A primary action button glued to a menu trigger inside one visual group, a helm composite over ZitsButton and ZitsMenu. One Variant / Size cascades to both halves. Click the action or open the menu below. This preview is the real component running in WebAssembly.

Examples

No action yet

razor

<ZitsSplitButton>
    <ZitsSplitButtonAction OnClick="Save">Save</ZitsSplitButtonAction>
    <ZitsSplitButtonTrigger />
    <ZitsSplitButtonMenu>
        <ZitsMenuItem OnSelect="SaveDraft">Save as draft</ZitsMenuItem>
        <ZitsMenuItem OnSelect="SaveCopy">Save a copy</ZitsMenuItem>
    </ZitsSplitButtonMenu>
</ZitsSplitButton>

Anatomy

text

ZitsSplitButton                 (group; cascades Variant / Size / Disabled)
├── ZitsSplitButtonAction       (the primary ZitsButton, squared on the seam)
├── ZitsSplitButtonTrigger      (the chevron that opens the menu)
└── ZitsSplitButtonMenu         (the dropdown surface; fill with ZitsMenuItem)

Installation

Terminal bash

navius add split-button

API reference

ZitsSplitButton (root; cascades Variant / Size / Disabled):

Prop	Type	Default
Variant	string	"default"
Size	string	"default"
Disabled	bool	false
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
Modal	bool	true

Parts

Prop	Type	Default
ZitsSplitButtonAction	slot	the primary action; OnClick + inherited Variant/Size
ZitsSplitButtonTrigger	slot	the chevron menu trigger; overridable glyph
ZitsSplitButtonMenu	slot	the dropdown; Side/Align/SideOffset, holds ZitsMenuItem