Button Component

Overview

Button can fill from the pointer’s entry point, roll or scramble its letters, draw an underline or border, drift toward the cursor magnetically, and compress briefly when pressed. It can also show a loading spinner and success check inside the button, which in production should follow real application events.

Use it for primary calls to action, dashboard controls, form submissions, and portfolio sites where stronger feedback helps. Animation should never obscure the label, delay the action, or make the control harder to use.

Theme and Interaction Customisation

Choose filled, outlined, or plain surfaces, colours, roundness, and icon position, with dot fill, character roll, scramble, underline, or border-draw hover effects. Interaction settings include rolling text, shimmer, magnetic movement, press feedback, duration, and letter stagger for character roll.

Example Production Use Case

A SaaS workspace can use a filled Invite teammate button with a dot-fill hover. On click it shows a spinner while the request runs, then a check only once the invite is actually sent, or an error if it fails.

A creative portfolio can use character roll and magnetic movement on its Contact me button, making the call to action part of the site’s personality.

A developer tool can keep frequently used command buttons restrained, using only press feedback and an outlined surface so repeated clicks stay fast and calm.

Best Used For

• Primary website calls to action.
• SaaS dashboard controls.
• Form submissions and onboarding steps.
• Creative and portfolio websites.
• Ecommerce product and cart actions.
• Product landing pages.
• Developer tools with restrained feedback.
• Interactive apps with real loading and success states.

Not For

Utility-heavy interfaces with many controls usually need consistent, restrained feedback rather than scrambling or magnetic effects everywhere.

Avoid moving or scrambled text on labels users must recognise instantly, and skip magnetic movement in tightly packed toolbars.

For destructive or financial actions, animation never replaces clear wording and explicit confirmation.

Performance Budget

Scope hover work to the active button, avoid layout recalculation for fills and borders, and process pointer movement only while hovering. Limit simultaneous shimmer and character effects, keep stagger short, and never delay the actual action for an animation.

Accessibility and Mobile

Use native button semantics for actions and links for navigation, with a stable accessible name even while letters roll or scramble. Communicate loading, success, and errors in text, and handle disabled states deliberately. On touch devices, don’t rely on hover, keep targets comfortable and press feedback immediate, and with reduced motion remove magnetic movement, scrambling, shimmer, and spring compression.

Common Mistakes

• Relying on animation instead of a clear label.
• Treating the demo loading sequence as real processing.
• Showing success after a failed action.
• Letting duplicate rolling text cause repeated screen-reader announcements.
• Combining rolling or shimmer text with scramble or character-stagger effects.
• Expecting the plain-surface underline to affect other variants.
• Making magnetic movement too strong.
• Overusing shimmer.
• Ignoring keyboard focus.
• Changing state before validation completes.
• Ignoring reduced-motion preferences.