Callout
Notifies users about important information related to their actions inside a Forms. Callouts can indicate success, warnings, errors, or provide additional information depending on the context inside a form.
- Leading Icon: Represents the type of Callout (e.g., success, error, info).
- Title: The primary text that conveys the key message of the callout.
- Description: Additional text providing further context or details.
- Optional Close Icon: A trailing icon that allows users to manually dismiss the callout.
- Optional Primary Action: A button that allows users to take any important action related to the callout, such as "Retry" or "Continue".
- Optional Secondary Action: An additional button that provides extra actions. This is often used for less critical actions, such as "Learn More" or "Cancel”
Type
- Success: Indicates that a user action was completed successfully, such as "Form submission successful" or "Data saved”
- Warning: Callouts the user to take notice of something important. It’s often used for reminders, such as "Your session will expire soon" or "Password is weak".
- Information: Provides the user with helpful or important information. It is non-critical but useful, such as "New updates are available" or "Your settings have been saved".
- Error: Notifies the user of an error that must be resolved before proceeding, such as "Failed to connect" or "Form submission error".
Close Icon
- Optional Close Icon: In some cases, users can click on the close icon to dismiss the callout component. This is useful for non-critical callouts that the user may want to manually clear from their view.
Action Buttons
- Primary Action Button: Typically uses the Secondary Button style for important actions related to the callout, such as "Retry", "Save Changes", or "Continue".
- Secondary Action Button: Often uses the Tertiary Button style. It’s not mandatory and is usually used for less important actions like "Cancel" or "Dismiss". This action can also be used for optional, supportive tasks such as "Learn More".
Usage example
Forms
Location: The callout appears when a user performs an action, usually within forms or modals, indicating whether the outcome is a success, error, warning, or information.
Width: For the callout’s width, it is usually full-width, adapting to the container or screen size, whether that is a modal, form, or full page. This ensures that the callout is clearly visible to the user.
Page
Location: Place it at the beginning of the page content to ensure it’s immediately visible to viewers, allowing them to understand the notification right away before diving into the rest.
Width: For the callout’s width, it is usually full-width, adapting to the container or screen size.
