Button

Button and buttonVariants, from shadcn/ui, with the look of the kit.

Preview

src/examples/button/example.astro

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

<Button>Save changes</Button>

Add to your site

npx docs-sitekit add button

It writes these files, and keeps a file you changed:

src/presentation/components/ui/button.tsx

It requires these entries of the registry, which add restores first:

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of Button
Key	Type	Default	Allowed values	Description
`variant`	string	"default"	"default", "destructive", "ghost", "link", "outline", "secondary"	The look of the button.
`size`	string	"default"	"default", "icon", "icon-lg", "icon-sm", "icon-xs", "lg", "sm", "xs"	The size of the button. The icon sizes are squares for a button that holds only an icon.
`asChild`	boolean	false	true, false	Draw the child element instead of a button. It does not work with Astro children, so on an Astro page use buttonVariants on the element.

Variants and states

Variants

Six looks for six jobs: the main action, a quiet one, an outline, a ghost, a destructive action and a link.

src/examples/button/variants.astro

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

<div class="flex flex-wrap items-center gap-3">
  <Button>Default</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="link">Link</Button>
</div>

Sizes

Three sizes for text, a smaller one, and four for a button that holds only an icon.

src/examples/button/sizes.astro

---
import { Plus } from "lucide-react";
import { Button } from "@/presentation/components/ui/button";
---

<div class="flex flex-wrap items-center gap-3">
  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button>Default</Button>
  <Button size="lg">Large</Button>
  <Button size="icon" aria-label="Add"><Plus aria-hidden="true" /></Button>
</div>

As a link

In an Astro file the look of a button goes on an anchor with buttonVariants, because asChild does not work with Astro children.

Get started Read the docs

src/examples/button/as-link.astro

---
import { ArrowRight } from "lucide-react";
import { buttonVariants } from "@/presentation/components/ui/button";
---

<div class="flex flex-wrap items-center gap-3">
  <a href="#" class={buttonVariants({ size: "lg" })}>
    Get started
    <ArrowRight aria-hidden="true" />
  </a>
  <a href="#" class={buttonVariants({ size: "lg", variant: "outline" })}>Read the docs</a>
</div>

Disabled

A disabled button is dimmed and takes no pointer events.

src/examples/button/disabled.astro

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

<div class="flex flex-wrap items-center gap-3">
  <Button disabled>Default</Button>
  <Button variant="outline" disabled>Outline</Button>
</div>

About

The button of shadcn/ui, wired to the tokens of the kit. Button draws a <button>. buttonVariants returns the classes of the same look, for an anchor or any other element.

On an Astro page, put the look on the element with buttonVariants. asChild hands the look to a child element through a React slot, and a child written in Astro is not a React element, so it does not work there.

Accessibility

A Button is a native <button>: Tab reaches it, and Enter and Space press it. An anchor with buttonVariants is a link, so Enter presses it and Space does not.
The focus ring is the 3 px ring of the component on top of the outline of the site, in both themes.
The heights are 36 px (default), 24 px (xs), 32 px (sm) and 40 px (lg). The square icon sizes are 36 px, 24 px, 32 px and 40 px. None of them reaches the 44 px that the kit asks for on a phone, so on a phone add a taller class, for example className="min-h-11". The 24 px sizes only meet the minimum of WCAG 2.2.
A button that holds only an icon needs an aria-label. The component cannot know the name, so it does not add one.
disabled dims the button to half its opacity and stops pointer events. A disabled control is exempt from the contrast rules.

Source

button.tsx

Edit this page

Last updated 30 October 2026