Deployment completed
All services are now running version 2.14.3.
Feedback
Alerts, tooltips, and status patterns. Feedback elements never rely on color alone — each always includes an icon and text.
Alerts
Inline feedback blocks. Use for persistent messages that don't require a modal.
Info
Your settings will take effect after the next deployment.
Success
Package published successfully to the npm registry.
Warning
3 deprecated APIs detected. Update before the next major release.
Error
Build failed: cannot resolve module @vulppi/kit.
Alert with action
Include a button when the user needs to act.
Session expiring soon
Your session expires in 5 minutes.
Toast
Ephemeral notifications for async feedback. Keep content concise and include a direct action only when needed.
Slow response detected
Requests to billing API are above 2.3s average.
Use .toast-stack to group toasts and .toast with color-group-* for intent.
Spinner
Minimal loading indicator for short operations. Prefer skeletons for larger loading surfaces.
Small
Default
Large
Empty state
Use when a list or dashboard has no data yet. The message should suggest the next meaningful action.
No environments configured
Create your first environment to connect secrets, deploy previews and run integration tests.
Tooltip
Contextual hints on hover/focus. Max one line. Uses popover with CSS anchor, plus viewport-aware
fallback flip.
Use .tooltip-wrap + .tooltip-anchor + .tooltip.
Appears above Appears below Clarifying context about this field
Tooltip uses popover + anchor CSS and flips placement when there is not enough room in the preferred side.
Skeleton
Loading placeholders. Match the exact shape of the content they replace.
List row
Content card
Available classes
.skeleton.skeleton-text.skeleton-text-sm.skeleton-circleStatus indicators
Small inline signals for live/async state.
Online
Degraded
Offline
Unknown
Usage rules
Do
- Always pair color with an icon in alerts
- Keep tooltip text to one line
- Use skeleton shapes that match the real content
- Include a dismiss button when appropriate
Don't
- Don't use tooltips for critical information
- Don't show multiple error alerts simultaneously
- Don't use skeleton for instant-loading content
- Don't put interactive elements inside a tooltip