SenButton Component Showcase

Variants

Sizes

Loading State (on click)

Disabled State

Click Handler Example

Use SenButton Standalone

Copy and use the code below in your own project. No need to install the full library!

Dependencies:

React (v18+)
Tailwind CSS (for styling, or adapt classes as needed)
TypeScript (optional, for type safety)

Required types/props for this exact code:

variant: 'primary' | 'secondary' | 'danger' | 'success'
size: 'sm' | 'md' | 'lg'
loading: boolean (optional, for loading state)
className: string (optional, for custom classes)
children: React.ReactNode
Any native <button> props (e.g. onClick, disabled, etc.)

import React from 'react';

export type SenButtonVariant = 'primary' | 'secondary' | 'danger' | 'success';
export type SenButtonSize = 'sm' | 'md' | 'lg';

export interface SenButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: SenButtonVariant;
  size?: SenButtonSize;
  loading?: boolean;
  className?: string;
  children: React.ReactNode;
}

const variantStyles: Record<SenButtonVariant, string> = {
  primary: 'bg-blue-500 text-white hover:bg-blue-600',
  secondary: 'bg-purple-500 text-white hover:bg-purple-600',
  danger: 'bg-red-500 text-white hover:bg-red-600',
  success: 'bg-green-500 text-white hover:bg-green-600',
};

const sizeStyles: Record<SenButtonSize, string> = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-5 py-3 text-lg',
};

export function SenButton({
  variant = 'primary',
  size = 'md',
  loading = false,
  className = '',
  children,
  ...props
}: SenButtonProps) {
  const isDisabled = loading || props.disabled;
  const isOnlyDisabled = !loading && props.disabled;

  return (
    <button
      className={[
        'relative inline-flex cursor-pointer items-center justify-center gap-2 rounded font-bold transition-colors duration-150',
        variantStyles[variant],
        sizeStyles[size],
        isDisabled && 'cursor-not-allowed',
        isOnlyDisabled && 'bg-gray-400 text-gray-700 hover:bg-gray-400',
        className
      ].filter(Boolean).join(' ')}
      disabled={isDisabled}
      {...props}
    >
      {loading && (
        <span className="absolute inset-0 flex items-center justify-center">
          {/* You can use your own spinner here */}
          <svg width="16" height="16" fill="none" viewBox="0 0 16 16" className="animate-spin text-inherit"><circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="2" opacity="0.25"/><path d="M15 8A7 7 0 1 1 8 1" stroke="currentColor" strokeWidth="2"/></svg>
        </span>
      )}
      <span className={loading ? 'opacity-0' : ''}>{children}</span>
    </button>
  );
}

You can customize the styles, props, or loading spinner as needed for your project.