Button

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

button.ts

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

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

button.json

{
  "form": [
    {
      "uid": "button_basic",
      "kind": "action",
      "type": "button",
      "label": "Click Me"
    }
  ]
}

Props

Use these props to customize your Button widget.

prop	type	description
label	string	The text displayed inside the button (Optional if icon is present)
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
variant	'filled' | 'outlined' | 'link'	Optional. Button style variant (Default: filled)
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)

Variants

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

Outlined

button-outlined.ts

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

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

button-outlined.json

{
  "form": [
    {
      "uid": "button_outlined",
      "kind": "action",
      "type": "button",
      "label": "Click Me",
      "props": {
        "variant": "outlined"
      }
    }
  ]
}

Link

button-link.ts

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

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

button-link.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)

button-icon.ts

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

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

button-icon.json

{
  "form": [
    {
      "uid": "",
      "kind": "action",
      "type": "button",
      "label": "Save",
      "props": {
        "icon": "save"
      }
    }
  ]
}

Button with Icon (Right)

button-icon-right.ts

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

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

button-icon-right.json

{
  "form": [
    {
      "uid": "",
      "kind": "action",
      "type": "button",
      "label": "Save",
      "props": {
        "icon": "save",
        "iconPosition": "right"
      }
    }
  ]
}

Icon Only Button

button-icon-only.ts

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

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

button-icon-only.json

{
  "form": [
    {
      "uid": "",
      "kind": "action",
      "type": "button",
      "label": "",
      "props": {
        "icon": "save"
      }
    }
  ]
}

Disabled State

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

button.ts

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

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

button.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:

{
  "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.

button-anatomy.html

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