MessageBox

A Message box can be used in sign up or submission cases where specific information or action is required by the user.

The purpose of the MessageBox is to deliver critical and essential information, highlight special messages and guide users towards specific actions. They are commonly used to provide immediate visual impact and engage users effectively.

Anatomy

  1. Background. Warning state color-accentamber-200.
  2. Icon. Warning state icons/actions/warning and color-accentamber-200.
  3. Title. Using typography-heading-5 and color-brand-400.
  4. Body. Using typography-paragraph-regular and color-brand-400.
  5. Action. Using the primary button with icon.

Component Health

Component checklist

Is documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Known issues

Repository

Includes a link to an external code repository

Open link