Components
Button
Clickable action trigger with variants and sizes.
The Button primitive renders a styled <button> (or, with asChild, any
element via Radix Slot). Variants and sizes are driven by
class-variance-authority.
Preview
import { Button } from '@web/components/ui/button';export default function ButtonDemo() { return ( <div className="flex flex-wrap items-center gap-3"> <Button>Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="destructive">Destructive</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="link">Link</Button> </div> );}Import
import { Button } from "@/components/ui/button";Props
Beyond all native <button> attributes, Button adds the variant props below.
The table is generated at build time from the real ButtonVariantProps type in
the apps/web source, so the variant / size options track the code.