Alerts

The Alert Component is a user interface element used to convey important messages, status updates, or contextual feedback to users. It appears prominently within the layout to capture attention and communicate the outcome of user actions or system events.

Component Structure

Each alert typically includes:

  • Icon (alert__icon) – Visual symbol representing the type of message (e.g. ✔, ⚠, ✖).
  • Title (alert__title) – Short headline to clarify the nature of the alert.
  • Message (alert__message) – Additional explanatory text.
  • Container (alert) – Styled wrapper that applies layout, color, and spacing.

Alert Variants

Success Your submission was successful.
Warning There are unsaved changes.
Error Something went wrong. Please try again.
Info This is additional information for your context.
HTML 
<div class="ss-c-alert--success">
            <strong class="ss-c-alert__title">Success</strong>
            <span class="ss-c-alert__message">Your submission was successful.</span>
        </div>

        <div class="ss-c-alert--warning">
            <strong class="ss-c-alert__title">Warning</strong>
            <span class="ss-c-alert__message">There are unsaved changes.</span>
        </div>

        <div class="ss-c-alert--error">
            <strong class="ss-c-alert__title">Error</strong>
            <span class="ss-c-alert__message">
                Something went wrong. Please try again.
            </span>
        </div>

        <div class="ss-c-alert--info">
            <strong class="ss-c-alert__title">Info</strong>
            <span class="ss-c-alert__message">
                This is additional information for your context.
            </span>
        </div>