Button

Triggers an action. Combine variant, tone, and size for the shape; 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 "@tidal-ds/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>
</>

Destructive tone

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

Success tone

<>
  <Button variant="primary" tone="success">Primary</Button>
  <Button variant="default" tone="success">Default</Button>
  <Button variant="outline" tone="success">Outline</Button>
  <Button variant="ghost" tone="success">Ghost</Button>
</>

Accent tone (lilac)

<>
  <Button variant="primary" tone="accent">Primary</Button>
  <Button variant="default" tone="accent">Default</Button>
  <Button variant="outline" tone="accent">Outline</Button>
  <Button variant="ghost" tone="accent">Ghost</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