Button Component Showcase

Introduction

The CustomButton component is a versatile button component that supports various styles and sizes. Below you will find examples of different button variants and sizes, including a special animated button.

Usage Examples

Primary Button

Secondary Button

Animated Button

Default Small Button

Primary Large Button

Secondary Small Button

Custom Animated Button

Code Snippet


import { CustomButton, AnimatedButton } from './CustomButton';

const ExamplePage = () => {
  return (
    <div className="p-8">
      <CustomButton variant="primary" size="medium">Primary Button</CustomButton>
      <CustomButton variant="secondary" size="large">Secondary Button</CustomButton>
      <AnimatedButton>Animated Button</AnimatedButton>
      <CustomButton variant="default" size="small">Default Small Button</CustomButton>
      <CustomButton variant="primary" size="large">Primary Large Button</CustomButton>
      <CustomButton variant="secondary" size="small">Secondary Small Button</CustomButton>
      <AnimatedButton className="bg-primary-light">Custom Animated Button</AnimatedButton>
    </div>
  );
};

export default ExamplePage;