# Feedback & Loading
> Alerts, toasts, spinners, and loading state components.
*Canonical: https://makerkit.dev/docs/tanstack-drizzle/ui-components/feedback-and-loading*
---
Components for user feedback, notifications, and loading states.
## 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
Mount the `Toaster` once in the root document. In TanStack Start the document shell lives in `apps/web/src/routes/__root.tsx` (the `shellComponent`), so add it inside the ``:
```tsx
import { Toaster } from '@kit/ui/sonner';
function RootDocument({ children }: { children: React.ReactNode }) {
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 */}
```
## Top Loading Bar Indicator
Page load progress bar at top of screen. It is bundled into `GlobalLoader` (enabled via the `displayTopLoadingBar` prop) and is not exported on its own.
```typescript
import { GlobalLoader } from '@kit/ui/global-loader';
```
```tsx
{isLoading && }
```
## Tooltip
Hover tooltip for additional information.
```typescript
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@kit/ui/tooltip';
```
```tsx
Helpful information here
```
These feedback components are part of the [TanStack Start Drizzle SaaS Kit](/drizzle).
---
**Next:** [Utilities →](./utilities)