Primitives

Button

Primary action element with 4 variants, 3 sizes, 3 square icon sizes and a loading state. An icon goes in as a child, before or after the label. buttonVariants lives in its own file with no use client, so a server component can style a link as a button.

view .md

Preview

variants

with an icon

icon only

sizes

states

Installation

terminal

bash

npx @entrepta/cli@latest add button

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

button.tsx

tsx

import { Button } from "@/components/entrepta/button"
import { ArrowRightIcon, GearIcon, RocketLaunchIcon } from "@phosphor-icons/react"

<Button>./projects.sh →</Button>
<Button><RocketLaunchIcon aria-hidden size={14} /> deploy</Button>
<Button variant="secondary">docs <ArrowRightIcon aria-hidden size={14} /></Button>
<Button variant="ghost" size="icon-md" aria-label="Settings">
  <GearIcon aria-hidden size={16} />
</Button>
<Button variant="secondary">$ npx @entrepta/cli@latest init</Button>
<Button variant="ghost">cat contact.txt</Button>
<Button variant="command">npx @entrepta/cli@latest add button</Button>
<Button size="sm" loading>Loading…</Button>

Props

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "command"	"primary"	Visual style variant
size	"sm" \| "md" \| "lg" \| "icon-sm" \| "icon-md" \| "icon-lg"	"md"	Height and padding. The icon sizes are square: name the button with aria-label
loading	boolean	false	Shows spinner and disables the button
asChild	boolean	false	Delegates rendering to child via Radix Slot