Threshold Alert Card
A stat card in breach state showing a live metric against its configured threshold with a calm next-action line.
A stat card in breach state showing a live metric against its configured threshold with a calm next-action line.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Threshold Alert Card shows a metric in breach: Error rate at 2.4% against a Target less than or equal to 2.0%, trailing 1 hour, elevated since Jun 13 09:14. An Above threshold badge and an AlertTriangle icon flag the state. A sparkline panel with the threshold as a dashed line shows the rise, and a What to do section gives the calm next action: check the gateway logs in Integrations for upstream 503 clusters.
All alert state is carried by theme tokens and badge variant semantics. No red-500 or destructive color literals appear anywhere in the component.
Reach for this block inside a status or monitoring dashboard when a single metric needs to surface its breach state with enough context that an on-call engineer can act without opening a second tab. Wire the threshold and window values to your alerting system and update the action text per metric type.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the error rate alert card. Other threshold breaches:
Tip: the What to do section is load-bearing; a card that names the breach without giving an action just generates a support ticket.