Button

Triggers an action with primary, secondary, or destructive emphasis.

button-basic-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";export function ButtonBasicDemo() {  return <Button>Button</Button>;}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-button.json

Variants

button-variants-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";export function ButtonVariantsDemo() {  return (    <div className="flex flex-wrap items-center justify-center gap-3">      <Button>Default</Button>      <Button variant="secondary">Secondary</Button>      <Button variant="outline">Outline</Button>      <Button variant="ghost">Ghost</Button>      <Button variant="minimal">Minimal</Button>      <Button variant="destructive">Destructive</Button>    </div>  );}

Sizes

Use xs in table rows, sm in toolbars, md for most actions, and xl for a main call to action.

button-sizes-demo.tsx

"use client";import { PlusIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";export function ButtonSizesDemo() {  return (    <div className="flex flex-col items-start gap-3">      <div className="flex items-center gap-2">        <Button variant="outline" size="xs">          <PlusIcon aria-hidden="true" />          New project        </Button>        <Button variant="outline" size="xs" iconOnly aria-label="New project">          <PlusIcon aria-hidden="true" />        </Button>      </div>      <div className="flex items-center gap-2">        <Button variant="outline" size="sm">          <PlusIcon aria-hidden="true" />          New project        </Button>        <Button variant="outline" size="sm" iconOnly aria-label="New project">          <PlusIcon aria-hidden="true" />        </Button>      </div>      <div className="flex items-center gap-2">        <Button variant="outline">          <PlusIcon aria-hidden="true" />          New project        </Button>        <Button variant="outline" iconOnly aria-label="New project">          <PlusIcon aria-hidden="true" />        </Button>      </div>      <div className="flex items-center gap-2">        <Button variant="outline" size="lg">          <PlusIcon aria-hidden="true" />          New project        </Button>        <Button variant="outline" size="lg" iconOnly aria-label="New project">          <PlusIcon aria-hidden="true" />        </Button>      </div>      <div className="flex items-center gap-2">        <Button variant="outline" size="xl">          <PlusIcon aria-hidden="true" />          New project        </Button>        <Button variant="outline" size="xl" iconOnly aria-label="New project">          <PlusIcon aria-hidden="true" />        </Button>      </div>    </div>  );}

With icon

Set aria-hidden on the icon so the label stays the accessible name.

button-with-icon-demo.tsx

"use client";import { ArrowRightIcon, GitBranchIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";export function ButtonWithIconDemo() {  return (    <div className="flex flex-wrap items-center justify-center gap-3">      <Button variant="outline">        <GitBranchIcon aria-hidden="true" />        New branch      </Button>      <Button>        Continue        <ArrowRightIcon aria-hidden="true" />      </Button>    </div>  );}

Icon buttons

Set iconOnly and give each button an aria-label.

button-icon-demo.tsx

"use client";import {  MagnifyingGlassIcon,  PlusIcon,  TrashIcon,} from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";export function ButtonIconDemo() {  return (    <div className="flex flex-wrap items-center gap-3">      <Button iconOnly aria-label="Add item">        <PlusIcon aria-hidden="true" />      </Button>      <Button variant="minimal" iconOnly aria-label="Search">        <MagnifyingGlassIcon aria-hidden="true" />      </Button>      <Button variant="destructive" iconOnly aria-label="Delete item">        <TrashIcon aria-hidden="true" />      </Button>      <Button        variant="outline"        size="xs"        iconOnly        aria-label="Delete row"        className="ms-3"      >        <TrashIcon aria-hidden="true" />      </Button>    </div>  );}

Loading

Set isPending while a task runs. The button keeps focus and ignores presses. Also install Spinner.

button-loading-demo.tsx

"use client";import { FloppyDiskIcon } from "@phosphor-icons/react";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Spinner } from "@/components/vip-ui/spinner";export function ButtonLoadingDemo() {  const [isSaving, setSaving] = useState(false);  return (    <Button      isPending={isSaving}      onPress={() => {        setSaving(true);        window.setTimeout(() => setSaving(false), 2000);      }}    >      {isSaving ? (        <Spinner size="sm" decorative />      ) : (        <FloppyDiskIcon aria-hidden="true" />      )}      Save changes    </Button>  );}

Link

To use your router, pass its link component to the as prop. Also install Button link.

Read the setup guide

button-link-demo.tsx

import { ButtonLink } from "@/components/vip-ui/button-link";export function ButtonLinkDemo() {  return (    <ButtonLink href="/components/installation" variant="outline">      Read the setup guide    </ButtonLink>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Button (opens in a new tab).

variant: "default" | "secondary" | "outline" | "ghost" | "minimal" | "destructive" = "default": Choose the action's visual priority. Minimal is for a quiet icon action.
size: "xs" | "sm" | "md" | "lg" | "xl" = "md": Heights are 28, 36, 44, 48, and 56 pixels. Inside a sized Toolbar, ButtonGroup, or ToggleButtonGroup, the group size applies. On touch screens, the touch area is at least 44 pixels high.
iconOnly: boolean = false: Makes the button a square for one icon. Give the button an aria-label.
static: boolean = false: Disable press scaling while keeping the button interactive.
layout: MotionProps["layout"]: Animate position or size changes when the button moves in the layout. Ignored when reduced motion is requested.