PrettyDesignerLauncher

Button that opens PrettyDesigner in a dialog for sheets and sidebars

Overview

PrettyDesignerLauncher provides a standardized way to access the PrettyDesigner in space-constrained contexts like sheets, sidebars, and property panels. It renders a button that opens a dialog containing the full PrettyDesigner.

Key Features

Consistent launch button with faPalette icon
Dialog wrapper with proper sizing (max-w-[1200px])
Success indicator (checkmark) when configured
Immediate onChange updates - no save/cancel needed

Examples

Basic Usage

Click the button to open the PrettyDesigner dialog. Changes are applied immediately.

Target Type

Target Name

Disabled

Configured State

When a design is configured, the button shows a checkmark and helper text.

Click the "Customize Appearance" button above and make any changes to see the configured state.

Props Reference

Prop	Type	Default	Description
`value`	`DesignConfig \| null`	`required`	Current design configuration (null if not configured)
`onChange`	`(config: DesignConfig) => void`	`required`	Callback when configuration changes
`targetType`	`DesignTargetType`	`required`	Type of target being customized (determines default icon)
`targetName`	`string`	`required`	Target name for preview placeholders
`targetDescription`	`string`	`-`	Optional target description for preview
`programId`	`string`	`-`	Program ID for image library access
`disabled`	`boolean`	`false`	Disabled state for read-only contexts
`className`	`string`	`-`	Additional CSS classes for the button

Usage

import { PrettyDesignerLauncher } from '@/ui/components';
import type { DesignConfig } from '@/ui/components';

// Basic usage in a sheet or sidebar
const [config, setConfig] = useState<DesignConfig | null>(null);

<PrettyDesignerLauncher
  value={config}
  onChange={setConfig}
  targetType="trait"
  targetName="My Trait"
/>

// With FormCustomField in FormBlock
<FormCustomField
  name="design"
  label=""
  render={({ field }) => (
    <PrettyDesignerLauncher
      value={field.value}
      onChange={field.onChange}
      targetType="trait-type"
      targetName={currentName}
    />
  )}
/>

// In a properties panel
<PrettyDesignerLauncher
  value={resource.appearance}
  onChange={(config) => updateResource({ appearance: config })}
  targetType="resource"
  targetName={resource.title}
  targetDescription={resource.description}
  programId={programId}
  disabled={isReadOnly}
/>

Prop

Type

Default

Description

value

DesignConfig | null

required

Current design configuration (null if not configured)

onChange

(config: DesignConfig) => void

required

Callback when configuration changes

targetType

DesignTargetType

required

Type of target being customized (determines default icon)

targetName

string

required

Target name for preview placeholders

targetDescription

string

-

Optional target description for preview

programId

string

-

Program ID for image library access

disabled

boolean

false

Disabled state for read-only contexts

className

string

-

Additional CSS classes for the button

import { PrettyDesignerLauncher } from '@/ui/components'; import type { DesignConfig } from '@/ui/components'; // Basic usage in a sheet or sidebar const [config, setConfig] = useState<DesignConfig | null>(null); <PrettyDesignerLauncher value={config} onChange={setConfig} targetType="trait" targetName="My Trait" /> // With FormCustomField in FormBlock <FormCustomField name="design" label="" render={({ field }) => ( <PrettyDesignerLauncher value={field.value} onChange={field.onChange} targetType="trait-type" targetName={currentName} /> )} /> // In a properties panel <PrettyDesignerLauncher value={resource.appearance} onChange={(config) => updateResource({ appearance: config })} targetType="resource" targetName={resource.title} targetDescription={resource.description} programId={programId} disabled={isReadOnly} />