ebuilder-component-eb-alert

name	ebuilder-component-eb-alert
description	Deep component skill for eb-alert. USE FOR: prop-safe YAML generation, nested prop authoring, and event wiring for eb-alert in eBuilder component YAML.

eb-alert Component Skill

General Docs

Use eb-alert for showing styled feedback messages. eb-alert supports built-in style messages Custom content with slot default Toggle visibility with visible prop Source files in ebuilder_engine_repository: ebuilder-js-sdk/packages/Vue/src/components/EBAlert

Main Props

name	type	description
message	string	Specifies message.
style	CSSProperties	Inline style overrides.
type	"success" | "info" | "warning" | "error"	Specifies type.
visible	boolean	Whether visible. Defaults to false — set to true to show the alert. Do not wrap in eb-if to toggle visibility; use this prop directly instead.

YAML Examples

Story Example 1

children:
  - name: eb-alert
    props:
      visible: true
      type: error
      message: Error text
  - name: eb-alert
    props:
      visible: true
      type: success
      message: Success text
  - name: eb-alert
    props:
      visible: true
      type: warning
      message: Warning text
  - name: eb-alert
    props:
      visible: true
      type: info
      message: Info text

Story Example 2

- name: eb-alert
            props:
              visible: true
              type: success
            children:
              - name: eb-typography
                props:
                  style:
                    color: red
                  message: This is the customized success text

Story Example 3

rootVars:
            customVisible: true
          ...
          children:
            - name: eb-alert
              props:
                visible: ${{ $rootVars.customVisible }}
                type: success
                message: Success text

Authoring Notes

• visible defaults to false. Set it to true (or bind it to a reactive var) to show the alert. Wrapping eb-alert in eb-if solely to toggle visibility is redundant — use the visible prop instead.
• Prefer locale keys for user-facing strings in labels/placeholders/tooltips.
• Keep business logic in configs tasks/resources/queries; keep component YAML focused on UI composition and event wiring.
• For event listeners defined as on.event_name, wire emit chains declaratively and keep handlers short.