Alert

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

alert.ts

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

export default golemForm().create({
  form: [
    {
      uid: 'alert_default',
      kind: 'display',
      type: 'alert',
      props: {
        text: 'This is a default alert message.',
      },
    },
  ],
});

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 component.

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 { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  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',
      },
    },
  ],
});

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"
      }
    }
  ]
}

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