Skip to main content

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. Learn more.