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.

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.

​
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

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

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. Read more about this pattern here.

Was this page helpful?

CheckboxCombobox