Reference@makeswift/runtimeControls

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
stringDefaults to 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"Defaults to horizontal

Position for the color label within the panel.

defaultValue
string | { color: string; opacity: number }

The value passed to your component when nothing is set in the Makeswift builder. Accepts either a CSS color string (e.g., "black", "#4f46e5") or an object with color and opacity fields (e.g., { color: "#4f46e5", opacity: 0.25 }).

Added in v0.28.6: object form { color, opacity }.

hideAlpha
boolean

Indicates whether to hide the alpha channel slider.

Prop type

The Color control passes a string RGBA value to your component. When a defaultValue is provided (either as a string or an object), the resolved prop type narrows to string instead of string | undefined. If you don’t set a defaultValue and no value is set in the builder, your component receives undefined.

Example

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

Using inline styles

1import { Color } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Button } from "./Button";
6
7runtime.registerComponent(Button, {
8  type: "button",
9  label: "Button",
10  props: {
11    backgroundColor: Color({
12      label: "Background color",
13      defaultValue: "black",
14    }),
15    color: Color({
16      label: "Text color",
17      defaultValue: "white",
18    }),
19  },
20});

Using CSS variables

1import { Color } from "@makeswift/runtime/controls";
2import { runtime } from "../../../../../lib/makeswift/runtime";
3
4import { Button } from "./Button";
5
6runtime.registerComponent(Button, {
7  type: "button",
8  label: "Button",
9  props: {
10    backgroundColor: Color({
11      label: "Background color",
12      defaultValue: "black",
13    }),
14    color: Color({
15      label: "Text color",
16      defaultValue: "white",
17    }),
18  },
19});

Using object defaultValue with opacity

You can pass an object with color and opacity fields to set a semi-transparent default. Available since v0.28.6.

1import { Color, Style } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Overlay } from "./Overlay";
6
7runtime.registerComponent(Overlay, {
8  type: "overlay",
9  label: "Overlay",
10  props: {
11    className: Style(),
12    overlayColor: Color({
13      label: "Overlay color",
14      defaultValue: { color: "#000000", opacity: 0.5 },
15    }),
16  },
17});

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

Changelog

VersionChanges
v0.28.6Added object form { color, opacity } for defaultValue.
v0.6.3Introduced Color control.