Alert

In the app

Inline, in the flow, stays until fixed. The app’s error box, with a warning and a neutral variant.

@varick/ui/components/alertAdded 2 Sept 2026

Run failed: connector timed out

The HubSpot connector did not respond within 30s. The run will retry at 02:15.

3 submissions need review

Confidence fell below the 0.8 threshold you set.

Runs are paused during the maintenance window

Scheduled runs resume automatically at 06:00 UTC.

Usage

import { Alert } from "@varick/ui/components/alert";

export function Example() {
  return (
    <Alert variant="danger" title="Run failed: connector timed out">
      The run will retry at 02:15.
    </Alert>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
variant	'danger' \| 'warning' \| 'neutral'	'neutral'	Danger and warning are role="alert"; neutral is role="status".
title	string	required	One line, in the tone colour.
icon	ReactNode	by variant	Replace the default glyph.
children	ReactNode	undefined	The explanation, and what happens next.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.error-box {
  background: var(--danger-soft);
  border: 1px solid rgba(213,95,90,0.22);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.error-box-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--danger); }
.error-box.warning { background: var(--warn-soft); border-color: rgba(249,115,22,0.28); }