Button

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

import { ArrowUpIcon } from "lucide-react";

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

import { ArrowUpIcon } from "lucide-react";

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

export function ButtonDemo() {
  return (
    <div className="flex items-center gap-3">
      <Button>Button</Button>
      <Button size="icon" variant="outline" aria-label="Scroll up">
        <ArrowUpIcon />
      </Button>
    </div>
  );
}

A button with a secondary icon action.

Installation


$ pnpm dlx shadcn@latest add https://tanstartercn.tsu.moe/r/button.json

Usage

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

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

Examples

Start aligned

import { ArrowUpIcon } from "lucide-react";

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

import { ArrowUpIcon } from "lucide-react";

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

export function ButtonDemo() {
  return (
    <div className="flex items-center gap-3">
      <Button>Button</Button>
      <Button size="icon" variant="outline" aria-label="Scroll up">
        <ArrowUpIcon />
      </Button>
    </div>
  );
}

Hidden code

Use hideCode for demos where the preview is the documentation.

Inline example

inline-button-example.tsx

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

export function InlineButtonExample() {

ComponentsBrowse the components available in this registry.Your ComponentBasic usage of the YourComponent template.

Components Your Component

On This Page

Installation Usage Examples Start aligned Hidden code Inline example

Edit this page