NGSTARTER UI

Alert

The Alert component shows an inline message inside the page. Use it to give users contextual feedback about a state, result, warning, or problem near the part of the interface where it matters.

Use it for:

Contextual feedback: Show messages inside forms, tables, cards, settings pages, or workflows.
Status messages: Communicate success, information, warnings, notices, or errors.
Optional structure: Add a title, icon, close button, auto-close behavior, or small actions.
Semantic variants: Use variants such as default, positive, informative, negative, notice, or secondary.

Do not use Alert for temporary toast messages, modal confirmations, critical required actions, or small status labels inside table rows. Use Snack Bar, Dialog, Action Required, or Badge for those cases.

The NgStarter Angular Alert component lets you show inline status messages, warnings, errors, confirmations, or contextual notices. Use inside page content when the message should remain visible near the affected workflow. It includes examples for Basic Alert, Alert Variants, Alert with icon, and Alert with title.

Basic Alert

Use a basic alert for a short inline message that belongs inside the current page context.

This is a NgStarter alert — check it out!

Alert Variants

Choose a variant that matches the meaning of the message, such as success, information, warning, notice, or error.

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

Alert with icon

Add an icon when the message needs a quick visual cue, especially for positive, informative, or negative states.

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

This is a NgStarter alert — check it out!

Alert with title

Use a title when the alert needs a clear summary before the supporting message.

Alert Title

This is a NgStarter alert — check it out!

Alert Title

This is a NgStarter alert — check it out!

Alert Title

This is a NgStarter alert — check it out!

Alert actions

Add actions when the user can dismiss the alert or take a small contextual step from the message.

This is a NgStarter Admin alert — check it out!

This is a NgStarter Admin alert — check it out!

This is a NgStarter Admin alert — check it out!

Alert Title

This is a NgStarter Admin alert — check it out!

Alert Title

This is a NgStarter Admin alert — check it out!