Echo

New

Every click ripples outlines out from the button

$ npx @hritik-sharmaa/repeat-ui add button-echo

Live preview

Customize

Label

Size

Colour

Text

Echoes3

Spread16px

Duration0.8s

Radius12px

import ButtonEcho from "@/components/repeat-ui/button-echo/preview";

<ButtonEcho>Click me</ButtonEcho>

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add button-echo --variant ts-tailwind

The files are in components/repeat-ui/button-echo/.

import ButtonEcho from "@/components/repeat-ui/button-echo/preview";

export default function Page() {
  return <ButtonEcho />;
}

Prop	Type	Default	Description	Options
`children`	`ReactNode`	-	The button label.	-
`size`	`"sm" \| "md" \| "lg"`	"md"	Height, padding and font size. Every Repeat UI button shares this scale.	sm \| md \| lg
`color`	`string`	"#fa5f1b"	Button and echo colour.	-
`textColor`	`string`	"#ffffff"	Text colour.	-
`echoes`	`number`	3	Outlines per click.	-
`spread`	`number`	16	Distance between echoes, in pixels.	-
`duration`	`number`	0.8	Seconds each echo takes to fade.	-
`radius`	`number`	12	Corner radius in pixels; the echoes follow it.	-
`onClick`	`(event: MouseEvent) => void`	-	Click event handler.	-
`className`	`string`	""	Extra classes for the button.	-