Radial Button

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

Installation

npx shadcn@latest add @iconiq/radial-button

File Structure

Usage

"use client";

import { RadialButton } from "@/components/ui/radial-button";

export function RadialButtonPreview() {
  return <RadialButton>Radial Button</RadialButton>;
}

Props

Props
Description

RadialButton

children

Button label or custom content rendered above the animated fill layer.

Type React.ReactNode

type

Native button type. Defaults to button so the control does not submit a form unless you opt in.

Type "button" | "submit" | "reset"·Default button

loading

Sets aria-busy and disables interaction while a form or async action is in progress.

Type boolean·Default false

disabled

Native disabled state. Also suppresses fill, press, and ripple-like feedback.

Type boolean·Default false

className

Optional class names merged onto the root button element.

Type string

onClick

Native click handler forwarded to the underlying button.

Type React.MouseEventHandler<HTMLButtonElement>

name

Form field name submitted with the parent form.

Type string

value

Optional submitted value when type is submit.

Type string

form

Associates the button with a form element by id.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.