Search...
K

Dot Launch Button

A minimalist, premium button featuring a grid-based arrow animation

Documentation

pnpm dlx @t7blocks/cli add dot-launch

Usage

import { Dotlaunchbutton } from "@/components/T7blocks/Dotlaunchbutton";

export default function Home() {
  return (
    <div className="h-screen flex items-center justify-center">
      <Dotlaunchbutton
        label="Get started"
        accentColor="#18db38"
        btnColor="#111111"
        animationSpeed={155}
      />
    </div>
  );
}

Properties

PropertyTypeDefaultDescription
classNamestring""Additional CSS classes for the button
labelstring"Get started"The text label to display on the button
accentColorstring"#18db38"The primary color of the grid and arrow animation
btnColorstring"#111111"The background color of the button
animationSpeednumber155The interval in milliseconds between animation steps

Inspiration

This component is inspired by Launch Button by Praveen Kumar

Related resources

Knob Toggle

Stagger Button