Feedback

Components for providing feedback and indicating loading states.

Alert Messages

Contextual feedback messages

This is an informational message.

Success! Your changes have been saved.

Warning: This action cannot be undone.

Error: Something went wrong.

<div className="flex items-center gap-2 p-4 rounded-lg bg-primary/10 text-primary">
  <InfoIcon className="size-4" />
  <span>Informational message</span>
</div>

Progress

Progress indicator for loading or completion

Uploading...33%

Processing...66%

Complete100%

<Progress value={33} />
<Progress value={66} />
<Progress value={100} />

Skeleton

Placeholder loading animation

<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-12 w-12 rounded-full" />

Status Indicators

Badges for showing status

ActivePendingErrorInactive

<Badge className="bg-green-500/10 text-green-600">Active</Badge>
<Badge className="bg-yellow-500/10 text-yellow-600">Pending</Badge>
<Badge className="bg-red-500/10 text-red-600">Error</Badge>