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.
Related Components
View allButtonGroup
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