Button

Button

Primary action component with variant system, size options, loading states, icon slots, and optional shimmer effects

Basic Usage

Variants

Size

Usage Guidelines

When to Use

  • Primary actions
  • Form submissions
  • Call-to-action elements
  • Loading states

Accessibility

  • Focus ring for keyboard
  • Disabled state announces correctly
  • aria-busy for loading

Performance

  • Zero runtime CSS
  • Tree-shakable variants

Common Mistakes

  • Using <a> styling on <button>
  • Missing aria-label on icon buttons
  • Nesting interactive elements

Frequently Asked Questions

Yes, Saha UI Button is fully accessible with proper ARIA attributes, keyboard navigation, and focus management.
Absolutely! Saha UI components are designed for Next.js 15/16 and work with both App Router and Pages Router.
Yes, all Saha UI components including Button automatically adapt to dark mode using our OKLCH color system.
Button supports default, secondary, outline, ghost, link, destructive, accent, and glass variants.

View on GitHub

See the full source code on GitHub

Related Components

View all
ButtonGroup

Grouped button layout with shared borders, orientation control, and seamless visual connection between actions

FloatingActionButton

Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support

IconButton

Icon-only button with size variants, accessibility labels, and interaction states

PlayButton

Specialized media control button with play/pause state visualization and audio-visual feedback

Next

Container