Color

Adds a Color picker panel in the Makeswift builder to visually edit a RGBA string prop.

Color panels on a Button component to edit the background and text colors

Params

label · string · default: "Text"

Text for the panel label in the Makeswift builder.

description · string

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format. Added in v0.24.8.

labelOrientation · "vertical" | "horizontal" · default: "horizontal"

Position for the color label within the panel.

defaultValue · string

The value passed to your component when nothing is set in the Makeswift builder. Must be a valid CSS color string.

hideAlpha · boolean · default: false

Indicates whether to hide the alpha channel slider.

What is the alpha channel slider?

Prop type

The Color control passes a string RGBA value to your component. If you don’t set a defaultValue and no value is set in the builder, your component will receive undefined.

Example

The following examples adds two Color controls to the backgroundColor and color props of a Button component.

Using inline styles

Button.makeswift.ts

import { Color } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Button } from "./Button";

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    backgroundColor: Color({
      label: "Background color",
      defaultValue: "black",
    }),
    color: Color({
      label: "Text color",
      defaultValue: "white",
    }),
  },
});

Using CSS variables

Button.makeswift.ts

import { Color } from "@makeswift/runtime/controls";
import { runtime } from "@/lib/makeswift/runtime";

import { Button } from "./Button";

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    backgroundColor: Color({
      label: "Background color",
      defaultValue: "black",
    }),
    color: Color({
      label: "Text color",
      defaultValue: "white",
    }),
  },
});

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.