Button Component

The Button component is a flexible, reusable action component used throughout Pulse AI. It supports multiple variants, sizes, loading states, icons, links, rounded styles, and Motion-powered animations while remaining fully compatible with Next.js Server Components.

Import

import Button from "@/components/ui/button";

Preview

Features

The Button component includes:

Five visual variants
Five size options
Multiple rounded styles
Left and right icons
Icon-only buttons
Loading states with customizable position
Internal and external links
Motion animations
Full-width support
Disabled state
Accessibility support
Server Component compatibility

Basic Usage

import Button from "@/components/ui/button";
 
export default function Example() {
  return (
    <Button>
      Get Started
    </Button>
  );
}

Variants

The Button component supports five visual variants.

Primary

Used for primary actions and main CTAs.

<Button variant="primary">
  Get Started
</Button>

Secondary

Used for supporting actions.

<Button variant="secondary">
  Learn More
</Button>

Outline

Used for lower-emphasis actions.

<Button variant="outline">
  Documentation
</Button>

Ghost

Used for toolbar actions and subtle interactions.

<Button variant="ghost">
  Settings
</Button>

Destructive

Used for dangerous or irreversible actions.

<Button variant="destructive">
  Delete Account
</Button>

Sizes

The Button component supports five sizes.

Extra Small

<Button size="xs">
  Extra Small
</Button>

Small

<Button size="sm">
  Small
</Button>

Medium

<Button size="md">
  Medium
</Button>

Large

<Button size="lg">
  Large
</Button>

Extra Large

<Button size="xl">
  Extra Large
</Button>

Rounded Styles

Choose how rounded the button corners should appear.

<Button rounded="none">
  Square Button
</Button>
 
<Button rounded="md">
  Rounded Button
</Button>
 
<Button rounded="full">
  Pill Button
</Button>

Icons

Buttons support Lucide React icons.

import { ArrowRight } from "lucide-react";

Left Icon

import { Rocket } from "lucide-react";
 
<Button leftIcon={Rocket}>
  Launch Project
</Button>

Right Icon

import { ArrowRight } from "lucide-react";
 
<Button rightIcon={ArrowRight}>
  Continue
</Button>

Both Icons

import {
  Sparkles,
  ArrowRight,
} from "lucide-react";
 
<Button
  leftIcon={Sparkles}
  rightIcon={ArrowRight}
>
  Generate Content
</Button>

Icon Only Buttons

Use iconOnly when displaying a single icon.

import { Search } from "lucide-react";
 
<Button
  iconOnly
  icon={Search}
  ariaLabel="Search"
/>

Custom Icon Size

import { Settings } from "lucide-react";
 
<Button
  iconOnly
  icon={Settings}
  iconSize={22}
  ariaLabel="Settings"
/>

Loading States

Loading states automatically disable the button and display a spinner.

Loading Left

<Button
  loading
  loadingPosition="left"
>
  Save
</Button>

Loading Right

<Button
  loading
  loadingPosition="right"
>
  Publish
</Button>

Loading Text

<Button
  loading
  loadingText="Saving..."
>
  Save Changes
</Button>

Animations

The component includes three animation presets.

Spring

Default interaction animation.

<Button animation="spring">
  Spring Animation
</Button>

Subtle

Reduced movement for more minimal interfaces.

<Button animation="subtle">
  Subtle Animation
</Button>

None

Disables Motion animations.

<Button animation="none">
  Static Button
</Button>

Link Buttons

Providing an href automatically renders a Next.js Link.

Internal Link

<Button href="/pricing">
  View Pricing
</Button>

Internal Link With Icon

import { ArrowRight } from "lucide-react";
 
<Button
  href="/dashboard"
  rightIcon={ArrowRight}
>
  Open Dashboard
</Button>

External Link

<Button
  href="https://github.com"
  external
>
  View GitHub
</Button>

Full Width

Use fullWidth to stretch the button to its container.

<Button fullWidth>
  Continue
</Button>

Disabled State

<Button disabled>
  Processing...
</Button>

Form Buttons

The component supports native button types.

Submit Button

<Button type="submit">
  Submit Form
</Button>

Reset Button

<Button type="reset">
  Reset Form
</Button>

Common Examples

Hero CTA

import {
  Rocket,
  ArrowRight,
} from "lucide-react";
 
<div className="flex flex-wrap gap-4">
  <Button
    size="lg"
    leftIcon={Rocket}
  >
    Get Started
  </Button>
 
  <Button
    size="lg"
    variant="outline"
    rightIcon={ArrowRight}
  >
    View Demo
  </Button>
</div>

Authentication Form

<Button
  type="submit"
  fullWidth
>
  Sign In
</Button>

Pricing Section

<Button
  href="/signup"
  size="lg"
>
  Start Free Trial
</Button>

Dashboard Actions

<div className="flex gap-3">
  <Button variant="outline">
    Cancel
  </Button>
 
  <Button>
    Save Changes
  </Button>
</div>

import {
  Search,
  Bell,
  Settings,
} from "lucide-react";
 
<div className="flex gap-2">
  <Button
    iconOnly
    icon={Search}
    variant="ghost"
    ariaLabel="Search"
  />
 
  <Button
    iconOnly
    icon={Bell}
    variant="ghost"
    ariaLabel="Notifications"
  />
 
  <Button
    iconOnly
    icon={Settings}
    variant="ghost"
    ariaLabel="Settings"
  />
</div>

Available Props

variant?:
  | "primary"
  | "secondary"
  | "outline"
  | "ghost"
  | "destructive";
 
size?:
  | "xs"
  | "sm"
  | "md"
  | "lg"
  | "xl";
 
rounded?:
  | "none"
  | "sm"
  | "md"
  | "lg"
  | "full";
 
animation?:
  | "spring"
  | "subtle"
  | "none";
 
leftIcon?: LucideIcon;
 
rightIcon?: LucideIcon;
 
icon?: LucideIcon;
 
iconOnly?: boolean;
 
iconSize?: number;
 
loading?: boolean;
 
loadingText?: string;
 
loadingPosition?:
  | "left"
  | "right";
 
href?: string;
 
external?: boolean;
 
fullWidth?: boolean;
 
disabled?: boolean;
 
ariaLabel?: string;
 
type?:
  | "button"
  | "submit"
  | "reset";
 
className?: string;

Summary

The Button component provides a consistent, accessible, and animated interface for actions across Pulse AI.

Recommended Usage

Use primary for main CTAs
Use secondary for supporting actions
Use outline for lower-emphasis actions
Use ghost for toolbars and navigation
Use destructive for dangerous actions
Use loading during async operations
Use iconOnly for compact action buttons
Use fullWidth for forms and authentication screens

Combine variants, sizes, icons, loading states, and animations to create buttons that fit any Pulse AI experience.