Button

Spring-pressed Button plus StatefulButton, MagneticButton, and MetallicButton variants.

View on beui.dev View Source

Live Preview

Live

BeUI Button Variants

Button Sizes

Icon Buttons

Buttons with Icons

Stateful Button

Magnetic Button

Hover over these buttons with a mouse to see the magnetic effect

Metallic Button

Hover to see the chrome shimmer effect

Ripple Effect

Installation & Files

Installation

pnpm dlx shadcn@latest add @beui/button

Component Files (5)

components/motion/button/base.tsx
components/motion/button/index.tsx
components/motion/button/magnetic.tsx
components/motion/button/metallic.tsx
components/motion/button/stateful.tsx

Component Details

Category: Components
Component Slug: button
Published: 5/17/2026
Last Updated: 9/22/2026

About This Catalog

This is a reference catalog of the complete BeUI component library. For full interactive demos, live code playgrounds, and detailed documentation, visit beui.dev.