Skip to main content

<hx-alert> v0.6.0+ HelixUI v0.6.0 or later required

The custom <hx-alert> element provides a user with an "at a glance" status of a given content section.


Dismiss the alert (removes element from the DOM).
Simulates a mouse click on the CTA.


Attributes enable declarative configuration of an element, via HTML markup.

cta {String} (optional)
Set the text of the CTA button. If absent or blank, the CTA button will not be displayed.
persist {Boolean}
When present, alert will not be dismissable.
status {String} (optional)
Sets the status text at the beginning of the alert description. If absent or blank, the status element will not be displayed.
type {Enum<String>} (optional)
Identifies the type of alert. Valid values are as follows:
  • info
  • error
  • success
  • warning


JavaScript properties enable programmatic access to an element's configuration and state.

cta {String}
Manipulates the cta attribute.
persist {Boolean}
When true, alert will not be dismissable.
status {String}
Manipulates the status attribute.
type {String}
Manipulates the type attribute.

See Also