# Alert

Source: https://design.ritchiebros.com/components/feedback/alert/

Alerts inform people about important changes or persistent conditions in a prominent way. They’re placed at the top of the page or section they apply to, below its header.

## Figma

The Figma reference for **Alert** will appear here once the design link is added.

## Storybook

Interactive examples for **Alert** will render here once the Storybook link is wired in.

## Best practices

- Use thoughtfully and sparingly, for only the most important information.
- Don’t use an alert to point at what to do in the UI — make that action clear in the UI itself.
- Make alerts dismissible unless they contain critical information or a required step.
- Use the default icon and color for success, info, warning, and critical tones.
- Focus each alert on a single theme, with at most one primary action.

## Do’s and don’ts

**Do:** Keep an alert concise and scannable, on one clear topic.

**Don’t:** Use an alert for marketing or upsell content — use a callout card instead.

## Related components

- [Snackbar](https://design.ritchiebros.com/components/feedback/snackbar/)
- [Dialog](https://design.ritchiebros.com/components/feedback/dialog/)