Alert

const PreviewEn = () => {
  return <Alert>A message that is important for the user to see</Alert>;
};

render(<PreviewEn />)

Use Alert when

• you need to show short and informative time-limited messages
• the information concerns an error that affects only one part of the system or a minor function
• there are connection issues or API errors that are likely to be resolved by reloading the page

Avoid Alert when

• the error prevents further use of the service, use an error page instead
• you need to notify the user about an error in a single form field, use the component’s own error message ValidationMessage
• the message is a static info box, use Card instead
• multiple error messages need to be summarised, use ErrorSummary instead

For more comprehensive guidelines on how to use alerts in services, see the pattern for System notifications. There you will find examples and recommendations on when to use Alert, and when other solutions may be more appropriate.

Examples

Alert can be used for four types of messages: information, success, warning and error.

Information

Use info when you want to provide the user with neutral and useful information.

const VariantInfoEn = () => (
  <Alert data-color='info'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Have you remembered to book a passport appointment?
    </Heading>
    <Paragraph>
      There are long queues for booking a passport these days, so it may be wise
      to book well in advance of your trip.
    </Paragraph>
  </Alert>
);

render(<VariantInfoEn />)

Success

Use success when you want to confirm that the user has completed a task, that the action was successful.

const VariantSuccessEn = () => (
  <Alert data-color='success'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Congratulations! You can now start your company
    </Heading>
    <Paragraph>
      It looks like the numbers add up, and that you have what it takes to start
      your company.
    </Paragraph>
  </Alert>
);

render(<VariantSuccessEn />)

Warning

Use warning when you want the user to take a specific action or to warn them about something important.

const VariantWarningEn = () => (
  <Alert data-color='warning'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      We are experiencing technical issues
    </Heading>
    <Paragraph>
      This means you may be interrupted while filling in the form. We are
      working to fix the issues.
    </Paragraph>
  </Alert>
);

render(<VariantWarningEn />)

Error message

Use danger to inform about something that is critical or that prevents the user from moving forward.

const VariantDangerEn = () => (
  <Alert data-color='danger'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      An error has occurred
    </Heading>
    <Paragraph>
      We are unable to retrieve the information you are looking for right now.
      Please try again later. If we still cannot show the information you need,
      please contact customer service on telephone 85 44 32 66.
    </Paragraph>
  </Alert>
);

render(<VariantDangerEn />)

With and without heading

If the message is longer than a sentence, it can be useful to use a heading to highlight the most important thing. This can be done using the Heading components. Remember to choose the correct heading level based on the space the alert has in the content structure of the page.

const WithHeadingEn = () => (
  <Alert>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Have you remembered to book a passport appointment?
    </Heading>
    <Paragraph>
      There are long queues for booking a passport these days, so it may be wise
      to book well in advance if you need a passport for the summer.
    </Paragraph>
  </Alert>
);

render(<WithHeadingEn />)

If the title and description repeat the same thing, it is better to use a simple sentence without a heading.

const WithOnlyHeadingEn = () => (
  <Alert data-color='warning'>
    <Paragraph>You have 7 days left to complete the application.</Paragraph>
  </Alert>
);

render(<WithOnlyHeadingEn />)

With link

You can have a link in the Alert if it helps the user solve the task. But be aware that a link takes the user out of the service, so use links only when absolutely necessary, for example if you want the user to open a form or perform an important task.

const MedLenkeEn = () => (
  <Alert data-color='warning'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      The application deadline is in 3 days
    </Heading>
    <Paragraph>
      The deadline for applying for admission to education is 15 April.{' '}
      <Link href='#'>Apply now</Link>
    </Paragraph>
  </Alert>
);

render(<MedLenkeEn />)

Guidelines

Alert is used to display important messages that require attention, but not necessarily action. It can be used to inform the user about the status, changes, or problems in a solution. The message is displayed clearly and visually distinguished from the rest of the content.

Use the component with caution. Users can confuse alerts with advertising, and thus ignore them. If we use alerts too often, we can exacerbate this problem.

Make sure that Alert has the same look and feel across all services and products. This component should be recognizable everywhere, so we should not adjust it.

Suitable for

• provide short and informative time-limited notifications
• inform about errors that only affect one part of the system or a minor function
• inform about connection problems or API errors that are likely to be resolved by reloading the page

Not suitable for

• validate individual form elements, instead use the component's own error message (See ValidationMessage)
• summarize multiple error messages in a form, instead use ErrorSummary
• display errors that prevent all further use of the service, instead use an error page
• display static information that should be displayed all the time, instead use Card

Text

It is not always easy to understand the difference between the notifications, even though they have different icons and colours. Therefore, it is important that the text we write in the notification is clear and easy to understand.

If there is something users need to or can do to get through their task, the text should convey that. When the message is longer than a sentence, it may be a good idea to include a heading that highlights the most important points.

Here is a list of the types of information that a notification should contain:

• Tell them what happened
  • Example: "Couldn't connect to account."
• Tell them why it happened
  • Example: "We were unable to connect to your account due to technical issues on our end."
• Reassure the user
  • Example: "Your changes have been saved."
• Give them a way out of the problem
  • Example: "If this problem occurs again, contact customer service."
• Help them fix the problem themselves
  • Example: "Please try again."

For more guidance on how to write clear and effective alert text, see the language recommendations in the System notifications pattern.