The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Edit preferences
info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
menu
more_horiz
  • More

Global alerts

Global alerts are used to inform users about important information related to the entire system and not just about a section or page.

linkGeneral specs

check_circle
Your account has been successfully migrated to the new user interface.
Your account has been migrated.
close

CSS properties

    margin
    0
    0
    0
    0
    border
    0
    0
    0
    0
    padding
    0
    0
    0
    0

    linkDescription

    • Global alerts are triggered by system events.
    • They appear as a fixed, full-width strip, on top of the screen throughout the application.
    Global alert position

    linkDifferent states and types

    Success

    Success alerts should be used when an action was performed successfully.

    check_circle
    Your account has been successfully migrated to the new user interface.
    Your account has been migrated.
    close
    content_copy

    Info

    Info alerts should be used when there are tips or information that a user can benefit from.

    info
    The new Patch Finder 2.0 will be released soon. You can see the details of this update.
    Patch Finder 2.0 will be released soon.
    close
    content_copy

    Warning

    Warning alerts should be used for messages that likely require attention.

    warning
    Your browser is outdated. For a better experience consider upgrading it to the latest version available.
    Your browser is outdated. Consider upgrading it.
    close
    content_copy

    Danger

    Danger alerts should be used when the system has failed to perform an action, or when the user has made an error.

    * Never include a close icon or link to dismiss the action. In cases when the alert should be dismissible use a warning alert instead. In many cases like this, the user path can be changed to achieve better results without requiring a close button in the component.
    error
    The connection has been lost. Check your connection and refresh this page.
    The connection has been lost.
    content_copy