Radial Button

Rounded button with a radial fill on hover—and inverted label.

Installation

npx shadcn@latest add @iconiq/radial-button

Props

RadialButton

9 props

Ref-forwarding motion button with a radial 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.