NordSecurity.Design

Alert

Overview

Our Alert is used to display important messages or status updates to the users. It is also used to provide feedback for Forms in a prominent way and supports several variants to provide context to the displayed message.

When using the Alert component, keep the content concise, clear, and action-oriented.

When to use

  • To interrupt the user and present relevant and critical information in a changing context.
  • To present status messages or form validation.

When not to use

  • Avoid using Alert too often as it’s intrusive and interrupts the user’s flow.
  • For messages that shouldn’t interrupt the flow - use simple text blocks.
  • For extensive information or content that requires an asset rather use a Modal.

Anatomy

  1. Container
  2. Icon
  3. Text

Variants & States

Variant

Alert variants follow our semantic color mapping.

Icon

Alerts are able to be displayed with or without an icon. The icon should always support the communicated message in a visual way to the user.

Internationalization

For RTL (right-to-left) languages, there are no custom adjustments made.

/

Properties

Name Type Values Description
text string “” Controls the text provided inside the Alert
variant string neutral
accent
success
warning
critical		 Defines the styling of the Alert
hasDefaultIcon boolean true
false		 Defines if the Alert will have the default icon that is provided depending on the variant
customIcon object {} Can be used to provide a custom icon inside the Alert

Usage Guidelines

DoOnly use Alert sparingly as a single point of focus for a changing context.
Don’tDon't stack multiple Alerts in the same context and overwhelm the user. Don't overuse alerts for trivial or non-urgent messages
DoRespect the semantic meaning and color coding for each variant.
Don’tDon't misuse the wrong semantic variant for the incorrect messaging. Example: Using the critical variant for a success mesage.
DoKeep the content short and clear.
Don’tDon't try to include too much text inside of the alert, which makes it hard for the user to scan the critical part of the message.

Content Guidelines

We’re using alerts to provide users with timely, critical feedback about system status, issues that require attention, or successful actions. These usually appear at the top of the screen or near the relevant UI element and can often be dismissed.

Voice and tone

Our tone depends on the alert type:

  • For success or informational alerts, we’re informative and supportive.
  • For error or warning alerts, we’re direct and action-oriented, without placing blame.
  • We avoid apologies unless it’s a genuine system error on our end.

Header (title)

  • We clearly state the status or problem.
  • We use the active voice where appropriate, especially for errors, to take responsibility.
  • We’re as specific as possible.
  • We keep it short and scannable.
  • We don’t use punctuation at the end for single-sentence headers.
  • We use sentence case.
DoWe couldn't connect you to the VPN
Don’tConnection failed due to a problem
DoCan’t connect to VPN
DoVPN connection failed

Body copy

  • We provide a brief explanation or a clear next step/solution.
  • We omit technical details if they aren’t helpful for users.
  • We use sentence case.
DoCheck your internet connection and try again.
Don’tPlease ensure that your device is properly connected to the internet before attempting to establish a VPN connection once more.

Action button

  • We start with a strong verb.
  • We keep it short (aim for 1-3 words).
  • We use sentence case.
  • We don’t use punctuation at the end.

Accessibility

  • We place focus on the alert only when it’s essential for task completion, to avoid interrupting users unnecessarily.
  • For urgent, important, or time-sensitive information (critical alerts or errors), the alert role could be used. This immediately announces the content to the screen reader.
  • For non-critical updates like “Your settings have been saved”, we work together with developers on the best way to announce the message subtly without interrupting the user.
  • If the alert includes an image or icon, we give it alt text that describes its meaning, or skip alt text if it’s purely decorative.
  • We ensure the alert message clearly communicates the state and provides helpful action steps. We don’t rely on color or icons alone to convey meaning.
  • If the alert is dismissible, the dismissal button has a clear, concise text label that announces its purpose (for example, “Close alert, button”) and is reachable via standard navigation on the platform.