Alert

Alert widgets are Display Fields used to provide contextual feedback or record information for the user. They are non-interactive and purely informational.

alert.ts

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

export default [
  gui.displays.alert({
    text: 'This is a default alert message.',
    uid: 'alert_default',
  }),
];

alert.json

{
  "form": [
    {
      "uid": "alert_default",
      "kind": "display",
      "type": "alert",
      "props": {
        "text": "This is a default alert message."
      }
    }
  ]
}

Props

Use these props to customize your Alert widget.

prop	type	description
text	string	Required. The message to display in the alert
level	string	Visual severity of the alert: default, info, success, warning, error. Defaults to default

Alert Levels

Use the level property to change the visual importance and color scheme of the alert.

alert.ts

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

export default [
  gui.displays.alert({
    text: 'Operation successful!',
    level: 'success',
    uid: 'alert_levels',
  }),
  gui.displays.alert({
    text: 'Potential issue detected.',
    level: 'warning',
    uid: 'alert_levels_2',
  }),
  gui.displays.alert({
    text: 'Operation failed.',
    level: 'error',
    uid: 'alert_levels_3',
  }),
];

alert.json

{
  "form": [
    {
      "uid": "alert_levels",
      "kind": "display",
      "type": "alert",
      "props": {
        "text": "Operation successful!",
        "level": "success"
      }
    },
    {
      "uid": "alert_levels_2",
      "kind": "display",
      "type": "alert",
      "props": {
        "text": "Potential issue detected.",
        "level": "warning"
      }
    },
    {
      "uid": "alert_levels_3",
      "kind": "display",
      "type": "alert",
      "props": {
        "text": "Operation failed.",
        "level": "error"
      }
    }
  ]
}

Dynamic content

The text prop supports string interpolation — embed live form data, metadata, or computed expressions using {{...}} slots. Slots re-evaluate as the user fills in the form:

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

gui.displays.alert({
uid: 'greeting',
text: "Hello {{$form.firstName + ' ' + $form.lastName}}, status: {{$meta.connectionStatus}}",
});

{
  "kind": "display",
  "type": "alert",
  "props": {
    "text": "Hello {{$form.firstName + ' ' + $form.lastName}}, status: {{$meta.connectionStatus}}"
  }
}

Use $errors and $formIsInvalid to show validation feedback inline:

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

gui.displays.alert({
uid: 'form_status',
text: "{{$formIsInvalid ? 'Please fix the errors below.' : 'Everything looks good!'}}",
});

{
  "kind": "display",
  "type": "alert",
  "props": {
    "text": "{{$formIsInvalid ? 'Please fix the errors below.' : 'Everything looks good!'}}"
  }
}

See String Interpolation for the full expression reference, including arithmetic, ternary, and optional chaining.

Styling

Alerts can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables used to style different severity levels and general appearance.

CSS Variable	Description
--gui-radius-md	Border radius for the alert box
--gui-font-sm	Font size of the message
--gui-space-2	Vertical margin between alerts
--gui-space-3	Vertical internal padding
--gui-space-4	Horizontal internal padding
Default Level
--gui-bg-surface-hover	Background color for default alerts
--gui-border-default	Border color for default alerts
--gui-text-default	Text color for default alerts
Info Level
--gui-intent-info-bg	Background color for info alerts
--gui-intent-info	Border color for info alerts
--gui-intent-info-text	Text color for info alerts
Success Level
--gui-intent-success-bg	Background color for success alerts
--gui-intent-success	Border color for success alerts
--gui-intent-success-text	Text color for success alerts
Warning Level
--gui-intent-warning-bg	Background color for warning alerts
--gui-intent-warning	Border color for warning alerts
--gui-intent-warning-text	Text color for warning alerts
Error Level
--gui-intent-error-bg	Background color for error alerts
--gui-intent-error	Border color for error alerts
--gui-intent-error-text	Text color for error alerts

Anatomy

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

alert-anatomy.html

<div class="gui-alert">
  <div class="gui-widget" id="alert_uid">
    <div role="alert" class="gui-alert-notification gui-alert-notification--info">
      This is an informational message.
    </div>
  </div>
</div>