Button

Use button utilities to quickly style buttons in HybridForms Forms.

Button Colors

Use FormButton color classes to style them in different colors. You can set the button to have default, primary, warning, or error styles.

Default Button

Primary Button

Primary style: class="hf-formbutton-primary".

<div class="grid column3">
    <div class="r1 c1">
        <div
            id="pri_small"
            class="hf-formbutton-primary"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c2">
        <div
            id="pri_medium"
            class="hf-formbutton-primary"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c3">
        <div
            id="pri_large"
            class="hf-formbutton-primary"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
</div>

Warning Button

Warning style: class="hf-formbutton-warning".

<div class="grid column3">
    <div class="r1 c1">
        <div
            id="war_small"
            class="hf-formbutton-warning"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c2">
        <div
            id="war_medium"
            class="hf-formbutton-warning"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c3">
        <div
            id="war_large"
            class="hf-formbutton-warning"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
</div>

Error Button

Error style: class="hf-formbutton-error".

<div class="grid column3">
    <div class="r1 c1">
        <div
            id="err_small"
            class="hf-formbutton-error"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c2">
        <div
            id="err_medium"
            class="hf-formbutton-error"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c3">
        <div
            id="err_large"
            class="hf-formbutton-error"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
</div>

Button Inline

Use button inline utility to quickly place a small button inline with a TextField under a label.

<div class="r1 c1 hf-button-inline">
    <input
        id="doku_input"
        type="text"
        data-hf-control="TextField"
        data-hf-options="{
            label: 'Test Button Inline'
        }"
    />
    <div
        id="doku_reverseGeolocator"
        class="pdf-hide"
        data-hf-control="ReverseGeolocatorButton"
        data-hf-options="{
            buttonType: 'small',
            targetFields: {
                'address_zip_code':'postal_code', 
                'address_city': 'locality', 
                'address_street_and_no':'route + street_number' 
            },
            typesSeperator: ', '
        }"
    ></div>
</div>

Button Inline with validator

FormControl with error text has to be wrapped in a hf-button-inline-input container to work properly.

<div class="r1 c1 hf-button-inline">
    <div class="hf-button-inline-input">
        <input
            id="gastro_patient_email"
            type="email"
            placeholder="name@domain.com"
            data-hf-control="TextField"
            data-hf-options="{
                label: 'E-mail address',
                validator: {
                    type: 'email',
                    errorText: 'E-mail address invalid!'
                }
            }"
        />
    </div>
    <div
        id="mailButton_gastro_patient"
        class="pdf-hide"
        data-hf-control="MailButton"
        data-hf-options="{
            mailId: 'gastro_patient_email',
            mailSubject: '[HybridForms]%20Demo%20-%20Info-Mail',
            buttonLabel: 'Open mail',
            buttonType: 'small',
            buttonHeading: 'Mail',
        }"
    ></div>
</div>