Icon Button Field

type IconButtonFieldStructure = {
    buttonScheme: HierarchyScheme;
    icon: CarbonIconType;
    iconSide?: 'left' | 'right';
    text: ReactNode;
    type: 'icon-button';
    elementProperties?: JSX.IntrinsicElements['button'];
    linkButton?: {
        linkAddress: string;
        linkProperties?: JSX.IntrinsicElements['a'];
    };
    conditionalRender?: {
        conditionalFields: ConditionalType[];
        conditionalRulesChainOption?: 'AND' | 'OR';
    };
    fieldWrapperProperties?: JSX.IntrinsicElements['div'];
    ariaRequired?: boolean;
    disabled?: boolean;
}

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const schema: FormSchema = { iconButtonExample: { type: 'icon-button', fieldWrapperProperties: { className: 'mb-2' }, text: 'Regular Primary Button' icon: TrashCan32 elementProperties: { className: 'primary' }, }, linkIconButtonExample: { type: 'icon-button', fieldWrapperProperties: { className: 'mb-4' }, elementProperties: { className: 'secondary' }, iconSide: 'left' text: 'Youtube link' icon: LogoYoutube32, linkButton: { linkAddress: 'https://www.youtube.com' linkProperties: { target: '_blank'} } } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const schema: FormSchema = {
    iconButtonExample: {
        type: 'icon-button',
        fieldWrapperProperties: { className: 'mb-2' },
        text: 'Regular Primary Button'
        icon: TrashCan32
        elementProperties: { className: 'primary' },
    },
    linkIconButtonExample: {
        type: 'icon-button',
        fieldWrapperProperties: { className: 'mb-4' },
        elementProperties: { className: 'secondary' },
        iconSide: 'left'
        text: 'Youtube link'
        icon: LogoYoutube32,
        linkButton: {
            linkAddress: 'https://www.youtube.com'
            linkProperties: { target: '_blank'}
        }
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result