Button

Triggers an action or event, such as submitting a form or opening a dialog.

Basic

Show code

import { Button } from "@makeplane/propel/components/button";

export default function BasicDemo() {
  return <Button label="Button" prominence="primary" tone="neutral" magnitude="md" sizing="hug" />;
}

With an icon

Show code

import { Button } from "@makeplane/propel/components/button";
import { Plus } from "lucide-react";

export default function WithIconDemo() {
  return (
    <Button
      label="New"
      prominence="primary"
      tone="neutral"
      magnitude="md"
      sizing="hug"
      startIcon={<Plus />}
    />
  );
}

Prominences

Show code

import { Button } from "@makeplane/propel/components/button";

export default function ProminencesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button label="Primary" prominence="primary" tone="neutral" magnitude="md" sizing="hug" />
      <Button label="Secondary" prominence="secondary" tone="neutral" magnitude="md" sizing="hug" />
      <Button label="Tertiary" prominence="tertiary" tone="neutral" magnitude="md" sizing="hug" />
      <Button label="Ghost" prominence="ghost" tone="neutral" magnitude="md" sizing="hug" />
    </div>
  );
}

Tones

Tone selects the palette: neutral (the default) or danger for destructive actions.

Show code

import { Button } from "@makeplane/propel/components/button";

export default function TonesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button
        label="Save changes"
        prominence="primary"
        tone="neutral"
        magnitude="md"
        sizing="hug"
      />
      <Button
        label="Delete project"
        prominence="primary"
        tone="danger"
        magnitude="md"
        sizing="hug"
      />
      <Button
        label="Remove member"
        prominence="secondary"
        tone="danger"
        magnitude="md"
        sizing="hug"
      />
    </div>
  );
}

Magnitudes

Show code

import { Button } from "@makeplane/propel/components/button";

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button label="Small" prominence="primary" tone="neutral" magnitude="sm" sizing="hug" />
      <Button label="Medium" prominence="primary" tone="neutral" magnitude="md" sizing="hug" />
      <Button label="Large" prominence="primary" tone="neutral" magnitude="lg" sizing="hug" />
      <Button label="Extra large" prominence="primary" tone="neutral" magnitude="xl" sizing="hug" />
    </div>
  );
}

Loading

The loading state shows a spinner, sets aria-busy, and blocks interaction while staying focusable.

Show code

import { Button } from "@makeplane/propel/components/button";

export default function LoadingDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button
        label="Saving"
        prominence="primary"
        tone="neutral"
        magnitude="md"
        sizing="hug"
        loading
      />
      <Button
        label="Inviting member"
        prominence="secondary"
        tone="neutral"
        magnitude="md"
        sizing="hug"
        loading
      />
      <Button
        label="Please wait"
        prominence="tertiary"
        tone="neutral"
        magnitude="md"
        sizing="hug"
        loading
      />
    </div>
  );
}

Installation

import { Button } from "@makeplane/propel/components/button";

Props

Button

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
prominence	"primary" \| "secondary" \| "tertiary" \| "ghost"	Yes
tone	"neutral" \| "danger"	Yes
magnitude	"sm" \| "md" \| "lg" \| "xl"	Yes
sizing	"hug" \| "fill"	Yes
nativeButton	boolean	No	Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. a `<div>` or an `<a>`): Base UI then adds `role="button"`, tab focus, and Enter/Space activation.
startIcon	ReactNode	No	Element rendered before the label (inline-start), e.g. `<Icon icon={Plus} />`.
endIcon	ReactNode	No	Element rendered after the label (inline-end), e.g. `<Icon icon={ArrowRight} />`.
label	string	Yes	Visible button label.
loading	boolean	No	Shows a spinner, sets `aria-busy`, and makes the button non-interactive.