edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
ComponentsBlocksMaps
HomeDocsComponentsStaticButton

On this page

Button (Static)

A lightweight button component with CSS transitions. No motion library dependencies for minimal bundle size while still providing smooth interactions.

Overview

The static Button component provides the same API as the animated version but uses CSS transitions instead of JavaScript-powered spring animations. This makes it significantly lighter (~3KB vs ~18KB).

Looking for premium spring animations? Check out the Animated Button component.

Usage

import { Button } from "@/components/ui/static/button"
<Button variant="outline">Button</Button>

Installation

Install via CLI

TypeScript
npx edbn-ui add button-static

Install dependencies

TypeScript
npm install class-variance-authority @radix-ui/react-slot @phosphor-icons/react

Import and use

TypeScript
import { Button, IconButton, buttonVariants } from "@/components/ui/static/button"

export default function MyComponent() {
  return (
    <Button variant="default">
      Click me
    </Button>
  )
}

Examples

Variants

Six visual styles to match different contexts and actions.

Sizes

Multiple size options for different contexts and layouts.

With Icons

Add icons at the start or end of the button.

Loading State

Built-in loading spinner with automatic button disabling.

Success State

Show a success checkmark after completing an action.

Ripple Effect

CSS-based ripple effect on click for visual feedback. Uses CSS keyframes instead of JavaScript animations.

The static button uses CSS @keyframes for the ripple animation instead of JavaScript-powered spring physics used in the animated version.

Icon Button

Square buttons for icon-only actions with required accessible labels.

As Child (Composition)

Merge button styles with any child element using Radix Slot.

TypeScript
import Link from "next/link"

{/* Render as a link with button styles */}
<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>

{/* Use with any component */}
<Button asChild variant="ghost">
  <a href="https://github.com" target="_blank">
    View on GitHub
  </a>
</Button>

API Reference

Button Props

PropTypeDefaultDescription
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"Visual style of the button
size"sm" | "default" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg""default"Size of the button
loadingbooleanfalseShow loading spinner and disable button
successbooleanfalseShow success checkmark
iconStartIcon—Icon displayed at the start (left)
iconEndIcon—Icon displayed at the end (right)
asChildbooleanfalseMerge props with child element

IconButton Props

PropTypeDefaultDescription
iconIconRequiredThe icon to display
aria-labelstringRequiredAccessible label for screen readers
Note: The static button does not have a disableAnimation prop since it uses CSS transitions by default. For complete animation control, use the Animated Button.

Accessibility

Built with WCAG 2.1 guidelines. Keyboard and screen reader support included.

Keyboard

TabMove focus to button
Enter/Space
Activate button

Screen Readers

• Icon buttons require aria-label

• Loading states use aria-busy

• Spinners are aria-hidden