Button

Triggers an action in place — submit a form, open a dialog, run a command. For navigation between pages or to an URL, reach for a link (or variant="link" when it must sit inline in prose). variant sets emphasis (primary = the workhorse CTA, default = neutral secondary action, outline / ghost = low-emphasis, link = inline text); tone sets intent (default, destructive for delete/remove, success for confirm, accent for the one brand moment per view). size follows the shared control scale — sm (28px) for dense rows and toolbars, md (32px, default) for standalone and form actions, lg (36px) for hero CTAs that need presence. Pass iconLeading / iconTrailing for icons, or loading for the spinner.

Usage — reserve Accent for one CTA per page

Primary (high-contrast inverse) is the workhorse CTA. Accent (lilac) is the brand moment — use it for the single most important action on a view. Aim for at most one Accent per page.

If you're reaching for multiple Accent buttons, first ask: can they all be variant="primary" (default tone)? If one genuinely outranks the others, keep that one on tone="accent" and demote the rest.

Variants (default tone)

import { Button } from "@liquidai/react";

<>
  <Button variant="primary">Primary</Button>
  <Button variant="default">Default</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>
</>

Round (pill)

<>
  <Button round>Primary</Button>
  <Button variant="default" round>Default</Button>
  <Button variant="outline" round>Outline</Button>
  <Button variant="primary" tone="accent" round>Accent</Button>
</>

Destructive tone

<>
  <Button variant="primary" tone="destructive">Filled</Button>
  <Button variant="outline" tone="destructive">Outline</Button>
  <Button variant="link" tone="destructive">Link</Button>
</>

Success tone

<>
  <Button variant="primary" tone="success">Filled</Button>
  <Button variant="outline" tone="success">Outline</Button>
  <Button variant="link" tone="success">Link</Button>
</>

Accent tone (lilac)

<>
  <Button variant="primary" tone="accent">Filled</Button>
  <Button variant="outline" tone="accent">Outline</Button>
  <Button variant="link" tone="accent">Link</Button>
</>

Sizes

<>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</>

Icons

import { Plus, ArrowRight } from "lucide-react";

<>
  <Button iconLeading={<Plus />}>New project</Button>
  <Button iconTrailing={<ArrowRight />}>Continue</Button>
  <Button variant="outline" iconLeading={<Plus />} iconTrailing={<ArrowRight />}>
    Both
  </Button>
</>

States

<>
  <Button>Default</Button>
  <Button disabled>Disabled</Button>
  <Button loading>Loading</Button>
  <Button variant="outline" loading tone="destructive">Submitting</Button>
</>

Props

Prop	Type	Default
variant	"primary" \| "default" \| "outline" \| "ghost" \| "link"	"primary"
tone	"default" \| "destructive" \| "success" \| "accent"	"default"
size	"sm" \| "md" \| "lg"	"md"
loading	boolean	false
disabled	boolean	false
iconLeading	ReactNode	—
iconTrailing	ReactNode	—
asChild	boolean (Radix Slot pattern)	false

Source

packages/react/src/components/button.tsx · Figma node 2718:8237