ComponentsButton

Button

A reusable React button family built from the current Figma button frames, including five semantic variants, three sizes, optional icons, and realistic implementation previews.

Primary

Use for the highest-emphasis action on a screen, especially when you need a clear next step or submit action.

Size

Icon

Disabled

Code preview

import React from "react";
import { Button } from "./Button";

export function PrimaryButtonExample(): React.JSX.Element {
  return (
    <Button variant="primary">
      Primary
    </Button>
  );
}

Secondary

Use for strong supporting actions that sit beside a primary CTA without competing with it.

Size

Icon

Disabled

Code preview

import React from "react";
import { Button } from "./Button";

export function SecondaryButtonExample(): React.JSX.Element {
  return (
    <Button variant="secondary">
      Secondary
    </Button>
  );
}

Tertiary

Use for lower-priority utility actions, optional follow-up tasks, or contextual next steps.

Size

Icon

Disabled

Code preview

import React from "react";
import { Button } from "./Button";

export function TertiaryButtonExample(): React.JSX.Element {
  return (
    <Button variant="tertiary">
      Tertiary
    </Button>
  );
}

Positive action

Use when the action should clearly communicate approval, acceptance, publish, or success intent.

Size

Icon

Disabled

Code preview

import React from "react";
import { Button } from "./Button";

export function PositiveButtonExample(): React.JSX.Element {
  return (
    <Button variant="positive">
      Positive
    </Button>
  );
}

Destructive

Use for delete, remove, archive, or irreversible actions where risk needs stronger signaling.

Size

Icon

Disabled

Code preview

import React from "react";
import { Button } from "./Button";

export function DestructiveButtonExample(): React.JSX.Element {
  return (
    <Button variant="destructive">
      Destructive
    </Button>
  );
}

Button specs

Visual token references for button text, fill, border treatment, and size heights across the current button families.

Button	Text	Background	Border	Height (px)
Primary	`#fcfcfc`	`#765cd8`	`None`	`52 / 44 / 38`
Secondary	`#765cd8`	`transparent`	`#765cd8`	`52 / 44 / 38`
Tertiary	`#5e49ac`	`#e3def7`	`None`	`52 / 44 / 38`
Positive	`#fcfcfc`	`#53765b`	`None`	`52 / 44 / 38`
Destructive	`#fcfcfc`	`#c8342a`	`None`	`52 / 44 / 38`