Buttons

Highly customizable and accessible interactive elements with dynamic states, themes, and animations.

Interactive Preview

Variants

Primary

                        es-btn-primary

Secondary

                        es-btn-secondary

Danger

                        es-btn-danger

Link

                        es-btn-link

Sizes & States

Sizes

Small

Medium

Large

States

Default

Loading

Disabled

Code Examples

Button with Icon

                        
// Import component
import { Button } from '@eseniiaia/components';

// Usage with React
function MyComponent() {
  const handleClick = () => console.log('Button clicked!');

  return (
    
  );
}

HTML Markup

                        
<button class="
  es-btn 
  es-btn-primary
  w-full
  py-2 px-4
  font-medium
  rounded-lg
  bg-blue-600 text-white
  hover:bg-blue-700
  transition-colors  
">
  Submit
</button>

Features

Keyboard Navigation

Buttons support focus states, keyboard activation (Enter/Space), and screen reader labels for full accessibility compliance.

Theme Awareness

Automatically adjusts contrast ratios and color schemes based on current theme (light/dark).