Skip to content
zits/ui

Split Button

Overview

Section titled “Overview”

SplitButton is a helm composite: it renders a ZitsMenu (over NaviusMenu) around a div role="group", and cascades one Variant/Size/Disabled context to ZitsSplitButtonAction (a real ZitsButton, over NaviusButton) and ZitsSplitButtonTrigger (a ZitsMenuTrigger, styled directly to match, since a button cannot nest a button). ZitsSplitButtonMenu is a styled ZitsMenuContent. Open state is owned here the same way ZitsCalendar owns selection: an internal mirror seeded from DefaultOpen, only adopting Open when the consumer supplies it, regardless of the menu’s own delegate-based model. It composes the existing Zits Button/Menu wrappers rather than a Navius primitive directly; NaviusButton/NaviusMenu are what those wrappers themselves compose underneath.

Install

Section titled “Install”
Terminal window
navius add split-button --to ./src/MyApp --namespace MyApp.Ui

Usage

Section titled “Usage”
@using Zits.Ui.Components


<ZitsSplitButton>
    <ZitsSplitButtonAction OnClick='() => Pick("Saved")'>Save</ZitsSplitButtonAction>
    <ZitsSplitButtonTrigger />
    <ZitsSplitButtonMenu>
        <ZitsMenuItem OnSelect='() => Pick("Saved as draft")'>Save as draft</ZitsMenuItem>
        <ZitsMenuItem OnSelect='() => Pick("Saved a copy")'>Save a copy</ZitsMenuItem>
    </ZitsSplitButtonMenu>
</ZitsSplitButton>


@code {
    private void Pick(string label) { }
}

Parts and props

Section titled “Parts and props”

ZitsSplitButton (root)

Prop Type Default Description
Variant string "default" default, destructive, outline, secondary, ghost, link. Cascaded to the action + trigger.
Size string "default" default, sm, lg. Cascaded to the action + trigger.
Disabled bool false Cascaded to the action + trigger.
Open / OpenChanged bool false Controlled menu open state. Bind with @bind-Open.
DefaultOpen bool false Uncontrolled initial open state.
Modal bool true Forwarded to the underlying ZitsMenu.

ZitsSplitButtonAction takes OnClick/Type/ChildContent/Attributes; Variant, Size, Disabled come from the cascaded context, not its own parameters. ZitsSplitButtonTrigger takes only ChildContent/Attributes (defaults to a chevron

  • "More options" screen-reader text). ZitsSplitButtonMenu is Side/Align/ SideOffset/ChildContent/Attributes over ZitsMenuContent (defaults: bottom/end/ 4).

Styling surface

Section titled “Styling surface”

The action is squared on the trigger side (rounded-r-none); the trigger is squared on the action side (rounded-l-none) with a divider border. Both are built from the same SplitButtonStyles.Base/Variant/TriggerSize tokens ZitsButton uses, copied verbatim to keep the two halves visually identical (the trigger can’t literally be a nested ZitsButton).

Parameter Values
Variant default · destructive · outline · secondary · ghost · link
Size default · sm · lg

Data attribute hooks

Section titled “Data attribute hooks”
Part Attribute Description
Root data-navius-split-button Marks the group container.
Trigger data-navius-split-divider Marks the seam divider between action and trigger.

Underlying primitives

Section titled “Underlying primitives”