Feature request: enhance/rename the Alert Element to a more versatile "Message" or "Notice" Element with built-in variants

Beta
#1

I’d like to suggest an enhancement to the current Alert Element. Right now, it’s great for styled boxes with optional close buttons, but the name “Alert” tends to imply something urgent or negative (like errors or warnings). In practice, you often need additional message options: success confirmations, info tips, neutral notices, warnings, etc., by manually tweaking colors, borders, and adding custom CSS classes (e.g. .alert-success, .alert-info).

It would be fantastic if this could evolve into a more general-purpose Message Element (or “Notice Element,” “Callout,” or whatever you want to name it) with native support for common variants right in the Inspector. Something like a simple dropdown for types:

  • Success (green)
  • Info (blue)
  • Warning (yellow/orange)
  • Error/Danger (red)
  • Neutral/Notice (gray or custom)

With per choice overrides.

This would automatically apply semantic colors and styling, while keeping full custom overrides available.

Why this would be nice:

  • Aligns perfectly with modern UI patterns
  • Reduces the need for custom CSS, making it faster and cleaner
  • Especially helpful for non-technical users or when handing sites over to clients. Explaining “add this CSS class for a success message” isn’t ideal, but a built-in dropdown is easy
  • Keeps backward compatibility easy (e.g. default to the current “Alert” style)

What do you think?

1 Like
#2

I agree the different types of alert you have provided for me are more in line with how you would use a general purpose “Notice” element. I have some ideas on a variant system in our future for theme options. We’re currently discussing, but I think it would be better suited for a UI like what I’m envisioning. I feel like I don’t really seem many users use the Alert element. Components could probably help with creating these different types. Have a great day.

1 Like
#3

A variant system? That sounds really good. If that could work on a Notice element then that’s perfect.

You’re probably right about the current Alert Element not seeing much use. I’ve never really used it. For a current project however I have a need for displaying various notices, hence this request. My thoughts were that this is something general enough that many more people could benefit from if there was a dedicated element for it with the variant options.

In the meantime a component or a couple of CSS classes is a good approach.

1 Like