iconiq
—Open GitHub

Origin Button

A rounded action button with a pointer-origin fill. On hover or keyboard focus, foreground color spreads from the entry point across the surface while the label inverts for contrast.

Installation

npx shadcn@latest add @iconiq/origin-button

Props

OriginButton

9 props

Ref-forwarding motion button with a pointer-origin fill, press feedback, and native form support. Hover, focus-visible, pointer-down, and keyboard activation spread the fill from the entry point.
childrenReact.ReactNode
Button label or custom content rendered above the animated fill layer.
type"button" | "submit" | "reset"
Defaultbutton
Native button type. Defaults to button so the control does not submit a form unless you opt in.
loadingboolean
Defaultfalse
Sets aria-busy and disables interaction while a form or async action is in progress.
disabledboolean
Defaultfalse
Native disabled state. Also suppresses fill, press, and ripple-like feedback.
classNamestring
Optional class names merged onto the root button element.
onClickReact.MouseEventHandler<HTMLButtonElement>
Native click handler forwarded to the underlying button.
namestring
Form field name submitted with the parent form.
valuestring
Optional submitted value when type is submit.
formstring
Associates the button with a form element by id.

Notes

Standard button attributes such as aria-*, autoFocus, formAction, formEncType, formMethod, formNoValidate, formTarget, and data-* are forwarded to the underlying motion.button.
Pointer-down sets the fill origin at the click point and enters a pressed state; pointer-up, pointer-leave, pointer-cancel, and blur clear it.
Space and Enter mirror the pressed and fill state for keyboard users. Space calls preventDefault so the page does not scroll while the button is focused.
Uses card/muted surfaces in dark mode, a foreground fill in light mode, and a neutral-50 fill in dark mode so resting and filled states stay legible.
Icon-only usage should include aria-label or aria-labelledby for an accessible name.