cel" variant="link" onClick={handleModalToggle}>
            Cancel
          </Button>
        ]}
      >
        <Form id="create-label-form">
          <FormGroup label="Label text" fieldId="create-label-form-label-text">
            <TextInput
              type="text"
              id="create-label-form-label-text"
              name="create-label-form-label-text"
              value={labelText}
              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setLabelText(value)}
              ref={labelInputRef}
            />
          </FormGroup>
          <FormGroup label="Color" fieldId="create-label-form-color">
            <div ref={colorContainerRef}>
              <Popper
                trigger={colorToggle}
                triggerRef={colorToggleRef}
                popper={colorMenu}
                popperRef={colorMenuRef}
                appendTo={colorContainerRef.current as HTMLElement}
                isVisible={isColorOpen}
              />
            </div>
          </FormGroup>
          <FormGroup label="Icon" fieldId="create-label-form-icon">
            <div ref={iconContainerRef}>
              <Popper
                trigger={iconToggle}
                triggerRef={iconToggleRef}
                popper={iconMenu}
                popperRef={iconMenuRef}
                appendTo={iconContainerRef.current as HTMLElement}
                isVisible={isIconOpen}
              />
            </div>
          </FormGroup>
          <FormGroup label="Label type" fieldId="create-label-form-label-type">
            <Radio
              isChecked={labelType === 'filled'}
              name="filled-label"
              onChange={() => setLabelType('filled')}
              label="Filled"
              id="radio-filled"
              value="check1"
            />
            <Radio
              isChecked={labelType === 'outline'}
              name="outline-label"
              onChange={() => setLabelType('outline')}
              label="Outlined"
              id="radio-outline"
              value="check2"
            />
          </FormGroup>
          <FormGroup label="Dismissable" fieldId="create-label-form-dismissable">
            <Radio
              isChecked={isClosable === true}
              name="closeable-label"
              onChange={() => setIsCloseable(true)}
              label="Yes"
              id="radio-closable"
              value="check1"
            />
            <Radio
              isChecked={isClosable === false}
              name="not-closeable-label"
              onChange={() => setIsCloseable(false)}
              label="No"
              id="radio-not-closable"
              value="check2"
            />
          </FormGroup>
          <FormGroup label="Editable" fieldId="create-label-form-editable">
            <Radio
              isChecked={isEditable === true}
              name="editable-label"
              onChange={() => setIsEditable(true)}
              label="Yes"
              id="radio-editable"
              value="check3"
            />
            <Radio
              isChecked={isEditable === false}
              name="not-editable-label"
              onChange={() => setIsEditable(false)}
              label="No"
              id="radio-not-editable"
              value="check4"
            />
          </FormGroup>
        </Form>
      </ModalDeprecated>
    </div>
  );
};