# Alerts

> Inline alerts, callouts, error summaries, system banners and status messages that live in the page.

- [Connection Alert](https://www.assembli.design/components/connection-alert.md): The offline pill: hidden while connected, it rises in when the connection drops with a count of changes saved on the device, shows a spinner while retrying, and turns green with a synced count when you're back before tucking itself away. The pill morphs between widths. Follows navigator.onLine by default, or takes a status from your sync engine.
- [Status Banner](https://www.assembli.design/components/status-banner.md): The system banner pinned above an app for scheduled maintenance, degraded performance, outages and the all-clear. Live incidents get a pulsing status dot, switching status cross-fades the message and blends the colour, and closing collapses the height so the page slides up. Soft and solid finishes, a time stamp and a status-page link.
- [Session Timeout Alert](https://www.assembli.design/components/session-timeout-alert.md): The inactivity warning before an automatic sign-out: a ring that drains around a live mm:ss countdown, Stay signed in and Sign out actions, and a red, pulsing last stretch. Extending shows a short confirmation and closes itself; running out turns it into a signed-out notice. Screen readers hear milestones, not every tick.
- [Quota Alert](https://www.assembli.design/components/quota-alert.md): A usage alert for metered plans (build minutes, seats, storage, API calls) that writes its own title and advice from the numbers and colours itself by level: calm below the warning line, amber past it, red with moving stripes at the limit. The meter marks where the warning starts and animates when usage changes.
- [Error Summary](https://www.assembli.design/components/error-summary.md): The form error summary that appears after a failed submit: a live count and one numbered row per problem that scrolls to its field and focuses it. Rows slide away as fields are fixed, the panel resizes smoothly, and it turns into a success message when nothing is left. Takes focus on every submit for keyboard and screen-reader users.
- [Docs Callout](https://www.assembli.design/components/docs-callout.md): Documentation callouts in the five GitHub-flavoured kinds (note, tip, important, warning, caution): a tinted panel with a coloured rail, labelled header and a prose body that styles links, inline code, lists and bold text. Custom titles, and a collapsible mode that animates long asides open.
- [Inline Alert](https://www.assembli.design/components/inline-alert.md): The everyday in-page alert in five intents (info, success, warning, danger, neutral) and four finishes (soft, outline, accent rail, solid). Optional title, filled and quiet actions that take the alert's colour, an inline layout for one-liners, and a close button that collapses the height so the page slides up.

Back to [all components](https://www.assembli.design/components.md).