Icon Button

An icon-only button for compact, labeled actions like adding, editing, or closing.

Basic

Show code

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

export default function BasicDemo() {
  return (
    <IconButton
      prominence="primary"
      tone="neutral"
      magnitude="md"
      aria-label="Add item"
      icon={<Icon icon={Plus} />}
    />
  );
}

Prominences

Prominence sets the visual weight: primary, secondary, tertiary, and ghost.

Show code

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

export default function ProminencesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton
        prominence="primary"
        tone="neutral"
        magnitude="md"
        aria-label="Add member"
        icon={<Icon icon={Plus} />}
      />
      <IconButton
        prominence="secondary"
        tone="neutral"
        magnitude="md"
        aria-label="Add member"
        icon={<Icon icon={Plus} />}
      />
      <IconButton
        prominence="tertiary"
        tone="neutral"
        magnitude="md"
        aria-label="Add member"
        icon={<Icon icon={Plus} />}
      />
      <IconButton
        prominence="ghost"
        tone="neutral"
        magnitude="md"
        aria-label="Add member"
        icon={<Icon icon={Plus} />}
      />
    </div>
  );
}

Tones

Tone selects the palette. danger renders as a solid fill on primary and a bordered outline on secondary.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { Check, Trash2 } from "lucide-react";

export default function TonesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton
        prominence="primary"
        tone="neutral"
        magnitude="md"
        aria-label="Approve request"
        icon={<Icon icon={Check} />}
      />
      <IconButton
        prominence="primary"
        tone="danger"
        magnitude="md"
        aria-label="Delete project"
        icon={<Icon icon={Trash2} />}
      />
      <IconButton
        prominence="secondary"
        tone="danger"
        magnitude="md"
        aria-label="Delete project"
        icon={<Icon icon={Trash2} />}
      />
    </div>
  );
}

Magnitudes

Show code

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

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton
        prominence="secondary"
        tone="neutral"
        magnitude="sm"
        aria-label="Add label"
        icon={<Icon icon={Plus} />}
      />
      <IconButton
        prominence="secondary"
        tone="neutral"
        magnitude="md"
        aria-label="Add label"
        icon={<Icon icon={Plus} />}
      />
      <IconButton
        prominence="secondary"
        tone="neutral"
        magnitude="lg"
        aria-label="Add label"
        icon={<Icon icon={Plus} />}
      />
      <IconButton
        prominence="secondary"
        tone="neutral"
        magnitude="xl"
        aria-label="Add label"
        icon={<Icon icon={Plus} />}
      />
    </div>
  );
}

Loading

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

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { RefreshCw } from "lucide-react";

export default function LoadingDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton
        prominence="primary"
        tone="neutral"
        magnitude="md"
        aria-label="Syncing workspace"
        loading
        icon={<Icon icon={RefreshCw} />}
      />
      <IconButton
        prominence="secondary"
        tone="neutral"
        magnitude="md"
        aria-label="Syncing workspace"
        loading
        icon={<Icon icon={RefreshCw} />}
      />
      <IconButton
        prominence="tertiary"
        tone="neutral"
        magnitude="md"
        aria-label="Syncing workspace"
        loading
        icon={<Icon icon={RefreshCw} />}
      />
    </div>
  );
}

Installation

import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";

Props

IconButton

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
nativeButton	boolean	No	Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. an `<a>`): Base UI then adds `role`, tab focus, and Enter/Space activation as appropriate.
icon	ReactNode	Yes	The single icon element to render, usually `<Icon icon={...} />`. The accessible name comes from `aria-label`.
loading	boolean	No	Shows a spinner, sets `aria-busy`, and makes the button non-interactive.