Magnetic Split Button
Dual-action execution trigger featuring kinetic magnetic separation on hover, corner radius morphing, and an integrated contextual command dropdown.
Dependencies
motionlucide-reactclsxtailwind-merge
Interaction
Conjoined rest state with central hairline divider. Hovering or opening menu induces magnetic repulsion: primary button translates -4px with pill radius morphing while chevron translates +4px with reverse morphing. Central divider dissolves.
Props
| Prop | Type | Description |
|---|---|---|
| defaultAction | string | Initial selected primary action label. |
| actions | MagneticSplitAction[] | Dropdown secondary menu options array. |
| onAction | (actionLabel: string) => void | Callback fired when primary button or menu item is clicked. |
| className | string | Additional classes applied to container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.