It’s best to use default icons. If you need to use a custom, consider using one that’s a container with a symbol inside.
Don’t use custom icons in alert, alert list, and form field messaging components unless they’re for special cases.
Position alerts 16px below the unified navigation or tabs so that it won’t conflict with them.
Don’t place an alert list too high or low where it blocks other interactive elements or visually appears awkward.
Ensure a minimum width of 1/3 of the viewport area.
Don’t have an alert list item hug content when message content is short. It’s easily missed on the page.
Make all stacked alert list items the same width.
Don’t have stacked alert list items in varying widths. This hinders the readability of message content.
Place the message directly in the modal body.
Don’t use an alert component as the single element in a modal.
Alerts containing less important information like a simple success message can be auto-dismissed if desired.
Don’t auto-dismiss alerts containing important information. They will be easily missed.
Make sure that the width of a form field message matches the width of its parent component.
Don’t have a form field messaging component hug content which causes the message to have a different width than its parent component.
Use an empty state component to reserve a dedicated space where there’s no content to display.
Don’t use an alert component in an area where there’s no content to display.