Button

The button comes in a few fun sizes and variants. The button is not extensively tested. In fact, it is not tested at all. But some of these look kinda nice.

The color of the button is red. As a consequence, the button text needs to clearly state its intentions so the button isn't mistaken as destructive.

note

This Button components actually shown here is made with normal css, because adding and configuring Tailwind for Docusaurus without half the page going completely off the rail is more work than I was willing to sacrifice at the time of writing. The real buttons can be seen here

Variants

Primary

Secondary

Outline

Sizes

Small

Medium

Large

---

Usage

Parameters

• variant: The variant of the button, primary, secondary, or outline.
• size: The size of the button. Can be small, medium, or large.
• disabled: Disables the button. Default false.
• onClick: function.

Example

page.tsx

import Button from './Button';

export default function page() {
  return (
    <Button variant="primary" size="medium" onClick={() => console.log('Button clicked')}>
      Click me
    </Button>
  );
}

Code

Button.tsx

import React from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

const getButtonClasses = ({variant, size, disabled}: 
    {variant: string, size: string, disabled: boolean}) => {
    const baseClasses = 'rounded-3xl';
  
    const variantClasses = {
      primary: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
      secondary: 'bg-gray-500 text-white hover:bg-gray-600 focus:ring-gray-500',
      outline: 'bg-transparent border border-red-500 text-red-500 \
                hover:bg-red-600 focus:ring-red-500',
    }[variant];
  
    const sizeClasses = {
      small: 'px-2 py-1 text-xs',
      medium: 'px-4 py-2 text-sm',
      large: 'px-6 py-3 text-base',
    }[size];
  
    const disabledClasses = disabled
      ? 'opacity-50 cursor-not-allowed'
      : 'hover:shadow-md';
  
    return `${baseClasses} ${variantClasses} ${sizeClasses} ${disabledClasses}`;
  };

export default function Button({
        variant = 'primary',
        size = 'medium',
        disabled = false,
        onClick = () => {},
        children,
    }: ButtonProps) {
  return (
    <button
      className={getButtonClasses({variant, size, disabled})}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};