DrylSplitButton
AI-aware
A primary action joined to a caret that opens a DrylMenu of secondary
variants — the canonical "Save ▾" pattern, composed from the existing
DrylButton and DrylMenu primitives. Both segments share
variant, size and AI state, so they always read as one control.
Save ▾ — the primary action plus its variants
The main button commits the default action; the caret offers the variants of it. Put DrylMenuItems in the MenuItems slot.
Last action: —
Variants
Variant styles both segments at once. Primary is quiet at rest and warms on hover; Bold is the filled treatment for the one call to action that should shout; Secondary and Ghost segment most cleanly; Danger carries its own signal.
Last action: —
Sizes
Size applies to the main button and the caret together, so the joined control keeps one height.
States
Loading spins the main action while the caret stays available; Disabled switches off both segments.
Loading spins the main action only — the caret stays usable. Disabled greys out both segments.
Block and menu placement
Block stretches the control to its container, with the caret keeping its own width. MenuPlacement decides where the caret's menu opens — BottomEnd by default, Top* for a control near the bottom of the viewport.
Block — the control fills its container. The caret keeps its own width; the main button takes the rest.
MenuPlacement — where the caret's menu opens. The default is BottomEnd, which is what a right-aligned caret wants; Top* is for a control near the bottom of the viewport.
Last action: —
AI mode
Ai and Aura are resolved once and handed to both halves — the two segments can never light differently.
State: Thinking · Aura: Comet — both segments always light together.