UnpopularButton Documentation

UnpopularButton Component

The UnpopularButton component has various props to customize its appearance and behavior.

Props

• children (node) - The content to display inside the button.
• onClick (function) - A callback function to handle button clicks.
• type (string) - The type of the button. Can be “button“, “submit“, or “reset“. Default is “button“.
• style (object) - Inline styles to apply to the button.
• disabled (boolean) - Whether the button is disabled. Default is false.
• hoverColor (string) - The color of the button when hovered. Default is #0056b3.
• borderRadius (string) - The border radius of the button. Default is “8px“.
• fontSize (string) - The font size of the button text. Default is “16px“.
• padding (string) - The padding inside the button. Default is “12px 24px“.

Usage Example

Here“s a basic example of how to use the UnpopularButton component:

import React from 'react';
import UnpopularButton from 'unpopular-js';

const App = () => {
  return (
    <div style={{ padding: '20px' }}>
      <UnpopularButton onClick={() => alert('Button clicked!')}>
        Click Me
      </UnpopularButton>

      <UnpopularButton
        style={{ backgroundColor: '#ff5722', borderRadius: '12px', padding: '14px 28px' }}
        hoverColor="#e64a19"
      >
        Custom Style
      </UnpopularButton>

      <UnpopularButton disabled>
        Disabled
      </UnpopularButton>

      <UnpopularButton hoverColor="#00bcd4">
        Hover Me
      </UnpopularButton>
    </div>
  );
};

export default App;

Extended Use Cases

Here are additional use cases to test the UnpopularButton component with various customizations:

1. Button with Custom Font Size and Padding

<UnpopularButton
  style={{ fontSize: '20px', padding: '16px 32px' }}
  hoverColor="#ff5722"
>
  Large Button
</UnpopularButton>

2. Button with Different Border Radius

<UnpopularButton
  style={{ borderRadius: '50px' }}
  hoverColor="#8bc34a"
>
  Rounded Button
</UnpopularButton>

3. Button with Disabled State

<UnpopularButton
  style={{ backgroundColor: '#9e9e9e' }}
  disabled
>
  Disabled Button
</UnpopularButton>

4. Button with Custom Hover Color

<UnpopularButton
  hoverColor="#673ab7"
>
  Custom Hover Color
</UnpopularButton>

5. Button with Custom Inline Styles

<UnpopularButton
  style={{
    backgroundColor: '#ff5722',
    color: '#ffffff',
    fontSize: '18px',
    border: '2px solid #e64a19',
  }}
  hoverColor="#e64a19"
>
  Stylish Button
</UnpopularButton>

Styling

The UnpopularButton component comes with default styling but allows you to customize its appearance through props and inline styles. You can adjust colors, border radius, font size, and padding to fit your design needs.