atomix/ui

Click It!

The Button component provides customizable styles and click sound feedback. It supports multiple variants and responds to user interactions with smooth animations and sound effects.

Installation

Add the /sound/click.wav and /sound/click-release.wav files in public folder.

Examples

Click It!

Props

Prop	Type	Description	Default
variant	string	Button style variant (`clicky`, `silent`, `submit`).	`clicky`
isPressed	boolean	State indicating if the button is pressed.	`false`
volume	number	Volume for click sounds (0 to 1).	`1`
className	string	Additional CSS classes.	-
disabled	boolean	Disables the button if true.	`false`

Basic Usage

import Button from "@/components/button";
 
export default function Example() {
  return (
    <Button variant="clicky" volume={0.5}>
      Click Me
    </Button>
  );
}

Button Variants

clicky: Provides a tactile feedback animation and sound on press.
silent: A quieter button style with hover effects but no click sounds.
submit: A generic button without sound effects or special animations.

Sound Effects

The Button component includes customizable click sounds, providing a more interactive experience. Adjust the volume prop to control the sound level.

Compound Variants

clicky with isPressed: true: Adds depth effect using translate and thicker borders.
clicky with isPressed: false: Uses larger border sizes for an unpressed state.

Button