Button Component - Rohit UI

Import

import { Button } from 'rohit-ui';

Examples

Basic Button

<Button>
  Click me
</Button>

Disabled Button

<Button
  disabled
>
  Disabled
</Button>

Primary Button

<Button
  primary
>
  Primary
</Button>

Rohit Mode Button

<Button
  rohitMode
>
  ✨ Click me! ✨
</Button>

Note: In Rohit Mode, the button will wiggle, change color, and make silly sounds when clicked.

Button with Icon

<Button
  icon={"🚀"}
>
  With Icon
</Button>

Button with onClick Handler

<Button
  onClick={"() => alert('Hello from Rohit UI!')"}
>
  Alert Message
</Button>

Props

Name	Type	Default	Description
children	ReactNode	required	The content to display inside the button
disabled	boolean	false	Whether the button is disabled
primary	boolean	false	Whether the button should use the primary style
rohitMode	boolean	false	Whether to enable Rohit Mode (wiggle animation and sounds)
icon	ReactNode	undefined	An icon to display before the button text
onClick	(event: React.MouseEvent) => void	undefined	Function to call when the button is clicked

CSS Customization

You can customize the Button component using styled-components:

import styled from 'styled-components';
import { Button } from 'rohit-ui';

const CustomButton = styled(Button)`
  background: linear-gradient(to bottom, var(--win98-silver), var(--win98-gray));
  border: 2px solid var(--win98-navy);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 1.1em;
  color: var(--win98-navy);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  
  &:hover {
    background: linear-gradient(to bottom, var(--win98-gray), var(--win98-silver));
    transform: translateY(-1px);
  }
  
  &:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }
`;

function MyComponent() {
  return (
    <CustomButton onClick={() => console.log("Clicked!")}>
      Custom Button
    </CustomButton>
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Button component will:

Wiggle or bounce randomly
Change color periodically
Make silly sounds when clicked
Draw unnecessary attention to itself