Button

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

Programmatic

button.ts

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

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

JSON

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)
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

Programmatic

button-outlined.ts

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

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

JSON

button-outlined.json

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

Link

Programmatic

button-link.ts

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

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

JSON

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)

Programmatic

button-icon.ts

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

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

JSON

button-icon.json

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

Button with Icon (Right)

Programmatic

button-icon-right.ts

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

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

JSON

button-icon-right.json

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

Icon Only Button

Programmatic

button-icon-only.ts

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

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

JSON

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.

Programmatic

button.ts

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

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

JSON

button.json

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

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

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>