Propel

Banner

A prominent message strip that surfaces status or announcements with an optional icon and trailing actions.

Basic

A new version of the workspace is available
Reload to get the latest features and fixes for your projects.
Show code
import { Banner } from "@makeplane/propel/components/banner";
import { Button } from "@makeplane/propel/components/button";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { X } from "lucide-react";

export default function BasicDemo() {
  return (
    <Banner
      placement="page"
      tone="neutral"
      title="A new version of the workspace is available"
      description="Reload to get the latest features and fixes for your projects."
      actions={
        <>
          <Button
            sizing="hug"
            prominence="secondary"
            tone="neutral"
            magnitude="sm"
            label="Learn more"
          />
          <Button
            sizing="hug"
            prominence="primary"
            tone="neutral"
            magnitude="sm"
            label="Update now"
          />
          <IconButton
            prominence="ghost"
            tone="neutral"
            magnitude="md"
            aria-label="Dismiss"
            icon={<Icon icon={X} />}
          />
        </>
      }
    />
  );
}

Tones

Your workspace settings were saved
A new project template is available to try
Cycles are rolling out to your workspace this week
Show code
import { Banner } from "@makeplane/propel/components/banner";

export default function TonesDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Banner placement="inline" tone="neutral" title="Your workspace settings were saved" />
      <Banner placement="inline" tone="info" title="A new project template is available to try" />
      <Banner
        placement="inline"
        tone="accent"
        title="Cycles are rolling out to your workspace this week"
      />
      <Banner placement="inline" tone="warning" title="Scheduled maintenance begins at 6 PM UTC" />
      <Banner
        placement="inline"
        tone="danger"
        title="Two projects failed to sync with the server"
      />
    </div>
  );
}

Placements

A new version of the workspace is available
Reload to get the latest features and fixes for your projects.
A new version of the workspace is available
Reload to get the latest features and fixes for your projects.
Show code
import { Banner } from "@makeplane/propel/components/banner";

export default function PlacementsDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Banner
        placement="page"
        tone="info"
        title="A new version of the workspace is available"
        description="Reload to get the latest features and fixes for your projects."
      />
      <Banner
        placement="inline"
        tone="info"
        title="A new version of the workspace is available"
        description="Reload to get the latest features and fixes for your projects."
      />
    </div>
  );
}

Dismissible

A dismiss control is just an action: render a ghost IconButton in actions.

Invite your teammates to this project
They will get access to every cycle and work item once they join.
Show code
import { Banner } from "@makeplane/propel/components/banner";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { X } from "lucide-react";

export default function DismissibleDemo() {
  return (
    <Banner
      placement="inline"
      tone="info"
      title="Invite your teammates to this project"
      description="They will get access to every cycle and work item once they join."
      actions={
        <IconButton
          prominence="ghost"
          tone="neutral"
          magnitude="md"
          aria-label="Dismiss"
          icon={<Icon icon={X} />}
        />
      }
    />
  );
}

Installation

import { Banner } from "@makeplane/propel/components/banner";

Props

Banner

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>NoAllows 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.
placement"page" | "inline"Yes
tone"neutral" | "info" | "accent" | "warning" | "danger"Yes
iconReactNodeNoNode rendered before the message (inline-start). Defaults to a tone-appropriate lucide icon; pass `null` to hide it. Sized to the banner's node size. Decorative, kept out of the name.
descriptionReactNodeNoBody text rendered under the title.
actionsReactNodeNoTrailing actions, placed after the message — e.g. buttons, or a dismiss `IconButton` (`<IconButton aria-label="Dismiss" icon={<Icon icon={X} />} onClick={…} />`).