For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Button

PreviousNext

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

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

export function ButtonDemo() {
  return <Button>Button</Button>;
}

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/button.json

Usage

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

Examples

Variants

Use the variant prop to change the button style.

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

export function ButtonVariants() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      <Button>Default</Button>

Size

Use the size prop to change the button size.

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

export function ButtonSizes() {
  return (
    <div style={{ alignItems: "center", display: "flex", gap: 8 }}>
      <Button size="sm">Small</Button>

Link

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

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

Icon

Use size="icon" for a square, icon-only button.

import { ChevronRightIcon } from "lucide-react";

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

export function ButtonIcon() {
  return (

With Icon

Place an icon before or after the label.

import { MailIcon } from "lucide-react";

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

export function ButtonWithIcon() {
  return (

Disabled

import { Loader2Icon } from "lucide-react";

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

export function ButtonDisabled() {
  return (

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { ArrowRightIcon, PlusIcon } from "lucide-react";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";

API Reference

Button

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

PropTypeDefault
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"
size"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg""default"
renderReact.ReactElement-

Use the render prop to render the button as a different element (the Base UI equivalent of asChild).