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