Skip to main content

Alert

Use Alert for a short warning, notice, or callout that should stand apart from regular text. In Atomicat 3.0 the Alert palette item is a preconfigured Text element with textType: alert, default div tag, and alert-specific color classes.

How It Works In Atomicat​

Alert reuses the Text editor for content and click behavior, then applies alert styles from the builder class system. Available alert style classes include red, blue, green, yellow, and gray, with an optional highlight state. Because it is still a text element, you can edit the message, tag, typography, spacing, and responsive behavior from the normal text/style controls.

When To Use It​

  • Show policy notes near a checkout or form, such as limited warranty or shipping restrictions.
  • Call out an offer condition without making it the primary page headline.
  • Warn visitors about a deadline, required step, or availability constraint.
  • Highlight proof or reassurance in a compact colored box.

Configure The Element​

  • Edit the message in the Text field and keep it short enough to scan.
  • Choose the text tag intentionally; div is usually better than a heading for alerts.
  • Use the alert color that matches the message: red for risk, yellow for caution, green for success, blue for information, gray for neutral notes.
  • Adjust padding, radius, border, and text color in the style drawer if the preset does not match the page design.

Testing Notes​

  • Preview on mobile because alert copy often wraps into multiple lines.
  • Check contrast between text and background after changing colors.
  • If the alert is clickable, test the click event exactly like a button.

Limitations And Tips​

  • Do not overuse alerts; too many callouts make every message feel low priority.
  • Alert is not a modal or toast; it stays in the page layout.
  • Keep legal or compliance wording accurate instead of using urgency language that may mislead visitors.

FAQ​

Is Alert a separate rendered component?

It is inserted as a Text element with alert presets, so Text settings still apply.

Can I change the alert color?

Yes. The implementation exposes alert style classes for red, blue, green, yellow, gray, and highlight styling.

Can an Alert trigger a click action?

Yes, because the underlying Text editor supports click events, but a Button is clearer for primary actions.