Button

Button widgets are Interactive Fields (Actions) used to trigger events, submit forms, or perform custom logic defined in the form configuration.

import { gui } from '@golemui/gui-shared';

export default [
  gui.actions.button({
    label: 'Click Me',
    uid: 'button_basic',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "uid": "button_basic",
      "kind": "action",
      "type": "button",
      "label": "Click Me"
    }
  ]
}

Props

Use these props to customize your Button widget.

prop	type	description
`actionType`	`'button' \| 'submit'`	Optional. Sets the HTML button type. `'submit'` triggers form-wide validation on click (Default: `'button'`)
`disabled`	boolean	Whether the button is interactive or not
`icon`	string	Optional CSS class for an icon (Implementation may vary by framework)
`iconPosition`	`'left' \| 'right'`	Optional. Position of the icon relative to the label (Default: `left`)
`label`	string	The text displayed inside the button (Optional if icon is present)
`variant`	`'filled' \| 'outlined' \| 'link'`	Optional. Button style variant (Default: `filled`)

Variants

Buttons support three style variants: filled (default), outlined, and link.

Outlined

import { gui } from '@golemui/gui-shared';

export default [
  gui.actions.button({
    variant: 'outlined',
    label: 'Click Me',
    uid: 'button_outlined',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "uid": "button_outlined",
      "kind": "action",
      "type": "button",
      "label": "Click Me",
      "props": {
        "variant": "outlined"
      }
    }
  ]
}

Link

import { gui } from '@golemui/gui-shared';

export default [
  gui.actions.button({
    variant: 'link',
    label: 'Click Me',
    uid: 'button_link',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "uid": "button_link",
      "kind": "action",
      "type": "button",
      "label": "Click Me",
      "props": {
        "variant": "link"
      }
    }
  ]
}

Icons

Buttons support icons that can be positioned to the left or right of the label. The label itself is optional if an icon is provided.

Button with Icon (Left)

import { gui } from '@golemui/gui-shared';

export default [
  gui.actions.button({
    icon: 'save',
    label: 'Save',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "action",
      "type": "button",
      "label": "Save",
      "props": {
        "icon": "save"
      }
    }
  ]
}

Button with Icon (Right)

import { gui } from '@golemui/gui-shared';

export default [
  gui.actions.button({
    icon: 'save',
    iconPosition: 'right',
    label: 'Save',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "action",
      "type": "button",
      "label": "Save",
      "props": {
        "icon": "save",
        "iconPosition": "right"
      }
    }
  ]
}

Icon Only Button

import { gui } from '@golemui/gui-shared';

export default [
  gui.actions.button({
    icon: 'save',
    label: '',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "action",
      "type": "button",
      "label": "",
      "props": {
        "icon": "save"
      }
    }
  ]
}

Disabled State

You can disable the button by setting the disabled property to true.

import { gui } from '@golemui/gui-shared';

export default [
  gui.actions.button({
    label: 'Click Me',
    disabled: true,
    uid: 'button_basic',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "uid": "button_basic",
      "kind": "action",
      "type": "button",
      "label": "Click Me",
      "disabled": true
    }
  ]
}

Submit behavior

Setting actionType: 'submit' turns the button into a form submission trigger. Clicking it runs form-wide validation before emitting the formSubmit event. If any field fails validation, submission is blocked.

Validation feedback

When a submit attempt fails due to validation errors, the button automatically displays an error border. This gives users a visual cue even when the invalid fields are not visible — for example in a long form or in a tab that is not currently selected.

The error border clears automatically once all validation errors are resolved.

This behavior is on by default and requires no additional configuration. In the demo below, submitting with the required Email field empty flags the button with an error border:

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.textInput('email', {
    label: 'Email',
    validator: {
      required: true,
    },
    uid: 'email',
  }),
  gui.actions.button({
    label: 'Submit',
    uid: 'submit-button',
    actionType: 'submit',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "uid": "email",
      "kind": "input",
      "type": "textinput",
      "path": "email",
      "label": "Email",
      "validator": {
        "type": "string",
        "required": true
      }
    },
    {
      "uid": "submit-button",
      "kind": "action",
      "type": "button",
      "label": "Submit",
      "actionType": "submit"
    }
  ]
}

If you prefer to block submission entirely rather than just flagging the button, you can combine actionType: 'submit' with the $formIsInvalid expression variable:

{
  "uid": "submit-button",
  "kind": "action",
  "type": "button",
  "label": "Submit",
  "actionType": "submit",
  "disabled": { "when": "$formIsInvalid" }
}

See Validators for how to configure field-level validation rules.

Styling

Buttons can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
`--gui-intent-primary`	Background color of the button
`--gui-intent-primary-text`	Color of the text inside the button
`--gui-intent-primary-hover`	Background color on hover
`--gui-intent-primary-active`	Background color when clicked
`--gui-radius-md`	Border radius of the button
`--gui-intent-error`	Border color when a submit button has unresolved validation errors
`--gui-shadow-focus-error`	Focus ring color when a submit button is in the invalid state

Anatomy

This is the anatomy of the Button Widget in case you want to use your CSS styles.

<div class="gui-widget">
  <button type="button" class="gui-button" id="button_id">
    Click Me
  </button>
</div>