The Color control provides your component an RGB string value that is editable in the Makeswift builder. The colors are stored and managed by Makeswift and can be shared across pages in a site.


AnchorA simple button

In this example we register a simple Button component with color and backgroundColor props controlled by Color controls.

Button color panels

Button color panel select color

Button color panel create color

import { ReactRuntime } from '@makeswift/runtime/react'
import { Color } from '@makeswift/runtime/controls'

function Button({ backgroundColor, color }) {
  return <button style={{ backgroundColor, color }}>Save</button>

ReactRuntime.registerComponent(Button, {
  type: 'button',
  label: 'Button',
  props: {
    backgroundColor: Color({ label: 'Color', defaultValue: 'black' }),
    color: Color({ label: 'Text color', defaultValue: 'white' }),



labelstringno'Text'Text for the panel label.
labelOrientationLabelOrientationno'horizontal'Position of the panel label.
defaultValuestringnostringWill be used when the value isn't set. Can be any CSS color string.
hideAlphabooleannofalseWhether to hide the alpha channel slider.

AnchorProvided value

The Color control provides an RGB string value to your component—or undefined if there's no value set. Use defaultValue if you never want your component to receive undefined.


type LabelOrientation = 'vertical' | 'horizontal'