Button

When to use

Use Button for anything that performs an action: submit, save, delete, open a dialog. If the control navigates, render a link (or BreadcrumbLink / NavigationMenuLink) styled as a button rather than a button that pushes a route. For a persistent on/off state reach for Toggle, and for two or three actions that read as one control use ButtonGroup.

Platform notes

One --primary button per screen region: destructive is reserved for irreversible actions, and secondary, outline and ghost carry everything else. The outline variant carries shadow-xs, which compiles to a transparent value under the Platform theme, so the edge you see is the border, and adding a shadow utility of your own will paint nothing either. Every label, including the aria-label on an icon-only button, is a react-i18next message; an icon-only button with no label fails the WCAG 2.2 AA name requirement. Async submits need a real pending state (disabled plus Spinner), which is the loading state the design rules require, not an optional nicety.

Install

npx shadcn@latest add button

Code

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

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button disabled>Disabled</Button>
    </div>
  );
}

Full API

ui.shadcn.com/docs/components/button