Progress & Badges

Visual indicators for tasks, loading states, and status descriptors.

Interactive Progress Bar

Progress bars with interactive slider control. Adjust the value to see the progress update in real-time.

Progress 35%

0% 100%

<PUI.Components.progress
value={@current_value}
min={0.0}
max={100.0}
class="h-2"
/>

<input
type="range"
min="0"
max="100"
value={@current_value}
phx-change="update_progress"
/>

Custom Min/Max Progress

Progress bars with custom minimum and maximum values for non-percentage ranges.

Storage Used (50-200 GB) 75 GB

Download Progress (0-50 MB) 32 MB

Temperature (0-100°C) 68°C

<PUI.Components.progress
value={75.0}
min={50.0}
max={200.0}
class="h-3"
/>

<PUI.Components.progress
value={32.0}
min={0.0}
max={50.0}
class="h-3"
/>

Badge Variants

Small status indicators with different semantic meanings.

Default Secondary Destructive Outline

<PUI.Components.badge variant="default">Default</PUI.Components.badge>
<PUI.Components.badge variant="secondary">Secondary</PUI.Components.badge>
<PUI.Components.badge variant="destructive">Destructive</PUI.Components.badge>
<PUI.Components.badge variant="outline">Outline</PUI.Components.badge>

Custom Styled Badges

Badges with custom colors using Tailwind classes.

Verified Online Pro Pending

Draft Warning Error

<PUI.Components.badge class="bg-blue-500 hover:bg-blue-600 text-white">
<.icon name="hero-check-circle" class="w-3 h-3 mr-1" />
Verified
</PUI.Components.badge>

<PUI.Components.badge class="bg-green-500 hover:bg-green-600 text-white">
<.icon name="hero-signal" class="w-3 h-3 mr-1" />
Online
</PUI.Components.badge>

<PUI.Components.badge class="bg-zinc-100 text-zinc-700 border border-zinc-200">
Draft
</PUI.Components.badge>

Badges in Context

Real-world usage examples showing badges in different UI contexts.

Sarah Johnson

sarah@example.com

Active

Production Server

192.168.1.100

Healthy

Quarterly Report.pdf

2.4 MB · Uploaded yesterday

Pending Review

<div class="flex items-center justify-between p-3 bg-zinc-50 rounded-lg">
<div class="flex items-center gap-3">
<.icon name="hero-user" class="w-5 h-5" />
<span>Sarah Johnson</span>
</div>
<PUI.Components.badge variant="secondary">Active</PUI.Components.badge>
</div>

Progress Props

Name	Type	Default	Description
value	float	0.0	Current progress value
min	float	0.0	Minimum value of the range
max	float	100.0	Maximum value of the range
class	string	nil	Additional CSS classes for the container

Badge Props

Name	Type	Default	Description
variant	string	default	Badge style (default, secondary, destructive, outline)
class	string	nil	Additional CSS classes