Buttons

Animated Button

Motion-powered button with spring feedback.

Import

tsx

import { AnimatedButton } from "@cronus-ui/ui";

bash

npx cronus-ui add animated-button

Examples

Spring feedback

Drop-in replacement for Button that lifts on hover and presses in on tap with a snappy spring.

tsx

<div className="flex flex-wrap items-center gap-3">
  <AnimatedButton variant="primary">Primary</AnimatedButton>
  <AnimatedButton variant="outline">Outline</AnimatedButton>
  <AnimatedButton variant="secondary">
    <Download />
    Download
  </AnimatedButton>
</div>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AnimatedButtonDefault layout:inline style:animated-button {
  label "Get started"
}

page "/audit/animated-button/default" type:custom {
  use AnimatedButtonDefault
}

API Reference

Generated from the component's exported types.

AnimatedButtonProps

Extends ButtonProps

Prop	Type	Default	Description
`variant`	`string`	—	Visual variant.
`size`	`string`	—	Control size.
`asChild`	`boolean`	—	Render as the child element via Slot.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`type`	`string`	—	Native type of the underlying element.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.