Escalation Timer
Workflow
Visual countdown for deadlines with automatic escalation and notification tracking. Features pause/resume controls, threshold markers, and color-coded urgency states.
Preview
Timer with escalation info and notification badges
48h 0m remaining
40% of deadline
0%75%90%100%
Escalates to Olivia Chen (Manager escalation) in 24h 0m
50% alert
75% alert
90% alert
Status States
Timer states based on urgency level
Normal
96h 0m remaining
80% of deadline
0%75%90%100%
Escalates to Priya Sharma (Reminder) in 48h 0m
Warning
24h 0m remaining
20% of deadline
0%75%90%100%
Escalates to Olivia Chen (Manager escalation) in 0m
Critical
7h 12m remaining
6% of deadline
0%75%90%100%
Escalates to Marcus Johnson (Auto-reassign) in 7h 12m
Expired
Time Expired
Escalation triggered
0%75%90%100%
Sizes
Small, medium, and large variants
Small
36h 0m remaining
50% of deadline
0%75%90%100%
Medium (default)
36h 0m remaining
50% of deadline
0%75%90%100%
Large
36h 0m remaining
50% of deadline
0%75%90%100%
Props
EscalationTimer component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
deadline | number | — | Total deadline in the specified unit |
elapsed | number | — | Elapsed time in the specified unit |
unit | 'minutes' | 'hours' | 'days' | 'hours' | Time unit for deadline and elapsed values |
warningThreshold | number | 0.75 | Percentage at which warning state begins (0-1) |
criticalThreshold | number | 0.9 | Percentage at which critical state begins (0-1) |
nextEscalation | NextEscalation | null | — | Next escalation target info |
notifications | Notification[] | [] | Array of notification checkpoints |
pausable | boolean | true | Show pause/resume button |
isPaused | boolean | false | Whether timer is currently paused |
onPause | () => void | — | Callback when pause button is clicked |
onResume | () => void | — | Callback when resume button is clicked |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
NextEscalation Type
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | Escalation recipient name |
level* | string | — | Escalation level description |
triggerAt* | number | — | Minutes at which escalation triggers |
Notification Type
| Prop | Type | Default | Description |
|---|---|---|---|
at* | number | — | Percentage threshold (0-1) |
sent* | boolean | — | Whether notification was sent |
Usage
Import and implementation example
import { EscalationTimer } from '@/components/ui/escalation-timer'
export default function Example() { const [isPaused, setIsPaused] = useState(false)
return ( <EscalationTimer deadline={5} elapsed={3.5} unit="days" warningThreshold={0.75} criticalThreshold={0.9} nextEscalation={{ level: 'Manager', name: 'Olivia Chen', triggerAt: 96 * 60 }} notifications={[ { at: 0.5, sent: true }, { at: 0.75, sent: false }, { at: 0.9, sent: false } ]} isPaused={isPaused} onPause={() => setIsPaused(true)} onResume={() => setIsPaused(false)} /> )}Features
Built-in functionality
- Flexible time units: Minutes, hours, or days
- Visual countdown: Time remaining display with progress bar
- Color-coded urgency: Normal (emerald), warning (amber), critical (rose), expired
- Threshold markers: Configurable warning and critical thresholds
- Escalation preview: Next step with recipient information
- Notification badges: Track sent/pending notifications at checkpoints
- Pause/resume: Optional timer controls for manual intervention
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Pause/resume button is a native button elementTime remaining is displayed as visible textStatus is communicated through icon and textKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus pause/resume button |
| Enter / Space | Toggle pause/resume state |
Notes
- Time remaining shown numerically, not just visually
- Status labels (remaining %, expired) provide context
- Color indicates urgency but text provides primary info
- Consider aria-live for countdown updates