Button

Source: packages/shared/components/ui/button.tsx Primitives: @radix-ui/react-slot, class-variance-authority

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

---

Preview

PrimarySecondaryTertiaryDestructiveGhostLink

Variants

Variant	Class Description	Usage
primary	Blue background, white text, subtle border	Default CTA — forms, dialogs
secondary	Gray background, dark text	Lower-emphasis actions
tertiary	White background, dark text, gray border	Outline-style buttons (e.g. “Save as Draft”)
destructive	Red background, white text	Delete, cancel
ghost	Transparent, hover reveals accent bg	Toolbar icons, inline actions
link	No background, underline on hover	Inline text links

Code

<Button variant="primary">Publish Job</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="tertiary">Save as Draft</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ghost">Menu Item</Button>
<Button variant="link">Learn more</Button>

---

Sizes

Size	Class	Height
default	h-10 px-4 py-2	40px
sm	h-7 px-2.5	28px
lg	h-12 px-6	48px
icon	size-10	40×40px

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><PlusIcon /></Button>

---

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "tertiary" | "destructive" | "ghost" | "link"	"primary"	Visual style
size	"default" | "sm" | "lg" | "icon"	"default"	Button size
asChild	boolean	false	Render as child element (e.g. wrapping a <Link>) via Radix Slot
disabled	boolean	false	Disables interaction, reduces opacity
className	string	—	Additional Tailwind classes

Plus all standard <button> HTML attributes.

---

Usage in the Codebase

Admin — LoginPage

<Button type="submit" className="w-full" disabled={isLoading}>
  {isLoading ? (
    <>
      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
      Signing In...
    </>
  ) : (
    "Sign In"
  )}
</Button>

Admin — JobForm

<Button type="button" variant="tertiary" onClick={handleSaveAsDraft}>
  <Save className="w-4 h-4 mr-2" />
  Save as Draft
</Button>
<Button type="submit">
  <FileText className="w-4 h-4 mr-2" />
  Publish Job
</Button>

Landing — ContactPage

<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto px-8">
  {isSubmitting ? "Submitting..." : "Submit"}
</Button>

---

Notes

• The buttonVariants function is also exported for use with non-button elements (e.g. styled links).
• Icons placed inside buttons are automatically sized to 16px via the [&_svg:not([class*='size-'])]:size-4 utility.
• Override in Admin LoginPage: className="w-full" stretches the button to full width inside the login card.
• Override in Admin ApplicantList: variant="ghost" className="mb-4" adds bottom margin for the back-navigation button.
• Override in Landing ContactPage: className="w-full sm:w-auto px-8" makes the submit button full-width on mobile and auto-width with extra horizontal padding on larger screens.