pitsi/ui
HomeDocsComponentsAnimationsBlocksTemplates
1
1
Sections
  • Get Started
  • Components
  • Animations
  • MCP Server
  • Forms
  • Changelog
Get Started
  • Installation
  • CLI
  • llms.txt
Components
  • Accordion
  • Alert Dialog
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button Group
  • Button
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Container
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Flex
  • Form
  • Grid
  • Hover Card
  • Input Group
  • Input OTP
  • Input
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Responsive
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spacer
  • Spinner
  • Squircle
  • Switch
  • Table
  • Tabs
  • Textarea
  • Theme Toggle
  • Toggle Group
  • Toggle
  • Tooltip
  • Typography
  • Unicorn Wrapper
Animations
  • Background Image Parallax
  • Blend Mode Cursor
  • Card Swipe Carousel
  • Cards Parallax
  • Cursor Hover Mask
  • Floating Image Gallery
  • Mouse Hover Gallery
  • Nav Menu
  • Parallax Scroll
  • Perspective Carousel
  • Perspective Section Transition
  • Scroll Expand
  • Scroll Fade
  • Scroll Scale
  • Slide Down
  • Slide Up
  • Smooth Parallax Scroll
  • Smooth Scroll
  • Sticky Footer
  • Text Along Path
  • Text Gradient Opacity
  • Text Parallax
  • Transforms 3d
  • Zoom Parallax
General

Resources, guides, and helpful links.

Documentation
Introduction
Installation
CLI
llms.txt
Next.js
Vite
Laravel
React Router
Pages
Home
Docs
Components
Animations
Blocks
Templates
Templates
Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Connect
GitHub
Twitter
Get Started
Changelog
Legal
Privacy
Terms
Blocks

Larger composed sections for building pages.

Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Category Filter
Comment List
Incentives
Order Confirmation
Order History
Order Summaries
Order Tracking
Product List
Product Overview
Product Review
Refund Form
Refund Overview
Refund Status
Shopping Cart
404 Page
About Us Page
Blog Details
Career Pages
Coming Soon Page
Contactus Page
Legal Pages
Login Page
Maintenance Page
Otp
Pricing Page
About Us Section
Blogs News
Clients
Contact Form
Cta
Faq
Features
Footer
Gallery
Hero Section
How It Works
Integration
Portfolio
Pricing Plans
Stats
Team
Testimonial
Components

Copy and paste UI components into your apps.

Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Checkbox
Collapsible
Combobox
Command
Container
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Flex
Form
Grid
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Responsive
Scroll Area
Segmented Control
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spacer
Spinner
Squircle
Switch
Table
Tabs
Textarea
Theme Toggle
Toggle Group
Toggle
Tooltip
Typography
Unicorn Wrapper
Animations

Beautiful animations and effects for your UI.

Background Image Parallax
Blend Mode Cursor
Card Swipe Carousel
Cards Parallax
Cursor Hover Mask
Floating Image Gallery
Mouse Hover Gallery
Nav Menu
Parallax Scroll
Perspective Carousel
Perspective Section Transition
Scroll Expand
Scroll Fade
Scroll Scale
Slide Down
Slide Up
Smooth Parallax Scroll
Smooth Scroll
Sticky Footer
Text Along Path
Text Gradient Opacity
Text Parallax
Transforms 3d
Zoom Parallax
Sign In

Button

PreviousNext

Displays a button or a component that looks like a button.

Powered by
shadcn/ui

Updated: We have updated the button component to add new sizes: icon-sm and icon-lg. See the changelog for more details. Follow the instructions to update your project.

<Button variant="outline">Button</Button>
<Button variant="outline" size
Button GroupCalendar

On This Page

InstallationUsageCursorExamplesSizeDefaultOutlineSecondaryGhostDestructiveLinkIconWith IconRoundedSpinnerButton GroupLinkAPI ReferenceButtonChangelog2025-09-24 New sizes
=
"icon"
aria-label
=
"Submit"
>
<ArrowUpIcon />
</Button>

Installation

pnpm dlx pitsi@latest add button

Usage

import { Button } from "@/components/ui/button"
<Button variant="outline">Button</Button>

Cursor

Tailwind v4 switched from cursor: pointer to cursor: default for the button component.

If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

globals.css
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Examples

Size

// Small
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>
 
// Medium
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>
 
// Large
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

Default

<Button>Button</Button>

Outline

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

Secondary

<Button variant="secondary">Secondary</Button>

Ghost

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

Destructive

<Button variant="destructive">Destructive</Button>

Link

<Button variant="link">Link</Button>

Icon

<Button variant="outline" size="icon" aria-label="Submit">
  <CircleFadingArrowUpIcon />
</Button>

With Icon

The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.

<Button variant="outline" size="sm">
  <IconGitBranch /> New Branch
</Button>

Rounded

Use the rounded-full class to make the button rounded.

<Button variant="outline" size="icon" className="rounded-full">
  <ArrowUpRightIcon />
</Button>

Spinner

<Button size="sm" variant="outline" disabled>
  <Spinner />
  Submit
</Button>

Button Group

To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.

<ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="icon" aria-label="Go Back">
      <ArrowLeftIcon />
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Archive</Button>
    <Button variant="outline">Report</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Snooze</Button>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" aria-label="More Options">
          <MoreHorizontalIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent />
    </DropdownMenu>
  </ButtonGroup>
</ButtonGroup>

Link

You can use the asChild prop to make another component look like a button. Here's an example of a link that looks like a button.

import Link from "next/link"
 
import { Button } from "@/components/ui/button"
 
export function LinkAsButton() {
  return (
    <Button asChild>
      <Link href="/login">Login</Link>
    </Button>
  )
}

API Reference

Button

The Button component is a wrapper around the button element that adds a variety of styles and functionality.

PropTypeDefault
variant"default" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"
size"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg""default"
asChildbooleanfalse

Changelog

2025-09-24 New sizes

We have added two new sizes to the button component: icon-sm and icon-lg. These sizes are used to create icon buttons. To add them, edit button.tsx and add the following code under size in buttonVariants:

components/ui/button.tsx
const buttonVariants = cva("...", {
  variants: {
    size: {
      // ...
      "icon-sm": "size-8",
      "icon-lg": "size-10",
      // ...
    },
  },
})
import { ArrowUp } from "lucide-react"

import { Button } from "@/components/ui/button"

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2 md:flex-row">
      <Button variant="outline">Button</Button>
      <Button variant="outline" size="icon" aria-label="Submit">
        <ArrowUp />
      </Button>
    </div>
  )
}

import { ArrowUpRight } from "lucide-react"

import { Button } from "@/components/ui/button"

export function ButtonSize() {
  return (
    <div className="flex flex-col items-start gap-8 sm:flex-row">
      <div className="flex items-start gap-2">
        <Button size="sm" variant="outline">
          Small
        </Button>
        <Button size="icon-sm" aria-label="Submit" variant="outline">
          <ArrowUpRight />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button variant="outline">Default</Button>
        <Button size="icon" aria-label="Submit" variant="outline">
          <ArrowUpRight />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button variant="outline" size="lg">
          Large
        </Button>
        <Button size="icon-lg" aria-label="Submit" variant="outline">
          <ArrowUpRight />
        </Button>
      </div>
    </div>
  )
}

import { Button } from "@/components/ui/button"

export function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>
}

import { Button } from "@/components/ui/button"

export function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>
}

import { Button } from "@/components/ui/button"

export function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>
}

import { Button } from "@/components/ui/button"

export function ButtonLink() {
  return <Button variant="link">Link</Button>
}

import { ArrowUpCircle } from "lucide-react"

import { Button } from "@/components/ui/button"

export function ButtonIcon() {
  return (
    <Button variant="outline" size="icon">
      <ArrowUpCircle />
    </Button>
  )
}

import { IconGitBranch } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

export function ButtonWithIcon() {
  return (
    <Button variant="outline" size="sm">
      <IconGitBranch /> New Branch
    </Button>
  )
}

import { ArrowUp } from "lucide-react"

import { Button } from "@/components/ui/button"

export function ButtonRounded() {
  return (
    <div className="flex flex-col gap-8">
      <Button variant="outline" size="icon" className="rounded-full">
        <ArrowUp />
      </Button>
    </div>
  )
}

import { Button } from "@/components/ui/button"

export function ButtonOutline() {
  return <Button variant="outline">Outline</Button>
}

import { Button } from "@/components/ui/button"

export function ButtonDefault() {
  return <Button>Button</Button>
}

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

export function ButtonLoading() {
  return (
    <Button size="sm" variant="outline" disabled>
      <Spinner />
      Submit
    </Button>
  )
}

"use client"

import * as React from "react"
import {
  Archive,
  ArrowLeft,
  CalendarDays,
  Clock,
  ListPlus,
  MailCheck,
  MoreHorizontal,
  Tag,
  Trash2,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function ButtonGroupDemo() {
  const [label, setLabel] = React.useState("personal")

  return (
    <ButtonGroup>
      <ButtonGroup className="hidden sm:flex">
        <Button variant="outline" size="icon" aria-label="Go Back">
          <ArrowLeft />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Archive</Button>
        <Button variant="outline">Report</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Snooze</Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="icon" aria-label="More Options">
              <MoreHorizontal />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-52">
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <MailCheck />
                Mark as Read
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Archive />
                Archive
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <Clock />
                Snooze
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CalendarDays />
                Add to Calendar
              </DropdownMenuItem>
              <DropdownMenuItem>
                <ListPlus />
                Add to List
              </DropdownMenuItem>
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>
                  <Tag />
                  Label As...
                </DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                  <DropdownMenuRadioGroup
                    value={label}
                    onValueChange={setLabel}
                  >
                    <DropdownMenuRadioItem value="personal">
                      Personal
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="work">
                      Work
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="other">
                      Other
                    </DropdownMenuRadioItem>
                  </DropdownMenuRadioGroup>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem variant="destructive">
                <Trash2 />
                Trash
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </ButtonGroup>
    </ButtonGroup>
  )
}