Buttons

Buttons trigger actions, submit forms, or link pages. Synapse UI includes specialized layouts with sliding icons, loading states, and premium micro-animations.

Interactive Showcase

Browse all the interactive button designs and variants included in Synapse UI.

Installation

Install any of the button components directly into your project via the CLI:

# Install Button 01 (Sliding Right Arrow)
npx shadcn@latest add http://localhost:3000/r/button-01.json

# Install Button 05 (Shimmer Button)
npx shadcn@latest add http://localhost:3000/r/button-05.json

# Install Button 10 (Loading Indicator Button)
npx shadcn@latest add http://localhost:3000/r/button-10.json

Usage Examples

Here are some common ways to use these custom button animations in your interfaces:

1. Sliding Arrow Action Button

Renders a button with an arrow icon that slides outwards on hover:

import Btn01 from "@/components/ui/button-01";

export default function StartForm() {
  return <Btn01 onClick={() => console.log("Form started")}>Get Started</Btn01>;
}