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.
shadcn-cssinjs
119

Button

PreviousNext

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

import { ArrowUpIcon } from "lucide-react";

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

export function ButtonDemo() {
  return (

Installation

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

Usage

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

Size

Use the size prop to change the size of the button.

import { ArrowUpRightIcon } from "lucide-react";

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

export function ButtonSize() {
  return (

Default

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

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

Outline

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

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

Secondary

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

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

Ghost

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

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

Destructive

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

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

Link

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

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

Icon

import { CircleFadingArrowUpIcon } from "lucide-react";

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

export function ButtonIcon() {
  return (

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

import { GitBranchIcon, GitForkIcon } from "lucide-react";

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

export function ButtonWithIcon() {
  return (

Rounded

Use the className prop to make the button rounded.

import { ArrowUpIcon } from "lucide-react";

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

export function ButtonRounded() {
  return (

Spinner

Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

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

export function ButtonLoading() {
  return (
    <div className="flex gap-2">

Button Group

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

"use client";

import {
  ArchiveIcon,
  ArrowLeftIcon,
  CalendarPlusIcon,

As Link

You can use the buttonVariants helper to make a link look like a button.

Do not use <Button render={<a />} nativeButton={false} /> for links. The Base UI Button component always applies role="button", which overrides the semantic link role on <a> elements. Use buttonVariants with a plain <a> tag instead.

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

export function ButtonRender() {
  return (
    <Button size="sm" variant="secondary" render={<a href="/docs" aria-label="Login">Login</a>} />
  );

RTL

To enable RTL support in shadcn/ui, see the RTL configuration 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" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"