# Feedback & Loading
> Alerts, toasts, spinners, and loading state components.
*Canonical: https://makerkit.dev/docs/nextjs-prisma/ui-components/feedback-and-loading*
---
Show user feedback with `Alert` for inline messages, `toast` (Sonner) for transient notifications, `Spinner` for action indicators, `Progress` for determinate progress, `LoadingOverlay`/`GlobalLoader` for blocking states, and `Tooltip` for hover hints. Add `Toaster` to your root layout once.
This guide is part of the [UI Components](./overview) documentation.
Feedback and loading components communicate system status to users - from error messages and success confirmations to progress indicators and loading states - ensuring users always know what's happening.
**Use Alert when:** displaying persistent messages that users need to read (errors, warnings, info).
- **Use toast when:** confirming transient actions (save successful, item deleted).
- **Use Spinner/Progress when:** operations take >300ms.
- **If unsure:** toast for user-triggered actions, Alert for system-initiated messages.
## Alert
Alert message for important information.
```typescript
import { Alert, AlertTitle, AlertDescription } from '@kit/ui/alert';
```
```tsx
Information
This is an informational alert message.
Error
Something went wrong. Please try again.
```
### With Icon
```tsx
import { TriangleAlert, CheckCircle } from 'lucide-react';
ErrorOperation failed.SuccessOperation completed.
```
## Toast (Sonner)
Toast notifications using Sonner.
```typescript
import { toast } from '@kit/ui/sonner';
```
```tsx
// Simple toasts
toast.success('Operation successful');
toast.error('Something went wrong');
toast.info('New message received');
toast.warning('Please review your input');
// With description
toast.success('Saved', {
description: 'Your changes have been saved.',
});
// Promise-based toast
await toast.promise(saveData(), {
loading: 'Saving...',
success: 'Data saved!',
error: 'Failed to save',
});
```
### Toaster Setup
Add to your root layout:
```tsx
import { Toaster } from '@kit/ui/sonner';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
## Spinner
Loading spinner animation.
```typescript
import { Spinner } from '@kit/ui/spinner';
```
```tsx
```
### In Button
```tsx
```
## Progress
Progress bar indicator.
```typescript
import { Progress } from '@kit/ui/progress';
```
```tsx
```
## Loading Overlay
Semi-transparent overlay with spinner.
```typescript
import { LoadingOverlay } from '@kit/ui/loading-overlay';
```
```tsx
{isLoading && }
```
## Global Loader
Full-page loading state.
```typescript
import { GlobalLoader } from '@kit/ui/global-loader';
```
```tsx
{/* With options */}
```
## Tooltip
Hover tooltip for additional information.
```typescript
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@kit/ui/tooltip';
```
```tsx
Helpful information here
```
In MakerKit, we use `toast.promise()` heavily for Server Action feedback - it handles loading, success, and error states in one call, which users find clearer than separate loading spinners.
## Common Pitfalls
- **Missing Toaster in layout**: Toast won't appear without `` in your root layout. Add it once and it works everywhere.
- **Alert vs Toast confusion**: Use Alert for persistent, inline messages. Use toast for transient notifications that auto-dismiss.
- **Tooltip without TooltipProvider**: Tooltips need `TooltipProvider` as a parent. Wrap your app or component tree once.
- **Spinner without sizing**: Spinner needs explicit dimensions via className. Default is small - use `className="h-8 w-8"` for visibility.
- **LoadingOverlay without relative parent**: LoadingOverlay uses absolute positioning. Its parent container needs `position: relative`.
- **Progress value out of range**: Progress expects value 0-100. Values outside this range may cause visual glitches.
{% faq
title="Frequently Asked Questions"
items=[
{"question": "How do I show a toast from a Server Action?", "answer": "Server Actions can't call toast directly. Return success/error status and call toast in the client component that invoked the action."},
{"question": "Can I customize toast duration?", "answer": "Yes. Pass duration in milliseconds: toast.success('Saved', { duration: 5000 }). Default is typically 4 seconds."},
{"question": "What's the difference between LoadingOverlay and GlobalLoader?", "answer": "LoadingOverlay covers a specific container (relative positioned). GlobalLoader covers the entire viewport for full-page loading states."},
{"question": "How do I show loading state during navigation?", "answer": "Use GlobalLoader with displayTopLoadingBar prop for a thin progress bar. Combine with Next.js loading.tsx for route transitions."},
{"question": "Can I use Alert in Server Components?", "answer": "Yes. Alert is a static display component with no client-side interactivity, so it works in Server Components without 'use client'."}
]
/%}
---
**Next:** [Utilities →](./utilities)