Renders a labeled progress bar with title and percentage display.

Example

<.labeled_progress label="Storage" value={42} />
<.labeled_progress label="Tasks" value={18} max={24} show_count />

Attributes

• label (:string) (required) - Accessible label and visible title.
• value (:integer) - Current progress value (between 0 and :max). Defaults to 0.
• max (:integer) - Maximum value. Default: 100. Defaults to 100.
• show_count (:boolean) - When true, shows value/max instead of just percentage. Defaults to false.
• size (:atom) - Bar height. Defaults to :default. Must be one of :sm, :default, or :lg.
• variant (:atom) - Fill color variant. Defaults to :default. Must be one of :default, :success, :warning, or :destructive.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. HTML attrs forwarded to the root <div>.

Renders a usage/limit progress bar with automatic color zones.

The bar fills bg-primary below :warn_at percent, amber (warning) between :warn_at and :danger_at, and red (destructive) above :danger_at. This follows GitHub's storage quota and Heroku's dyno usage patterns.

Example

<.quota_bar used={8_500} limit={10_000} unit="MB" label="Storage" />
<.quota_bar used={950} limit={1_000} unit="req/hr" label="API requests" warn_at={70} />

Attributes

• used (:integer) (required) - Amount currently used.
• limit (:integer) (required) - Maximum allowed amount.
• label (:string) - Label shown above the bar. Defaults to "Usage".
• unit (:string) - Unit suffix (e.g. "MB", "GB", "requests"). Defaults to nil.
• warn_at (:integer) - Percentage at which the bar turns amber (warning zone). Defaults to 80.
• danger_at (:integer) - Percentage at which the bar turns red (danger zone). Defaults to 95.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. HTML attrs forwarded to the root <div>.

Renders a multi-color segmented progress bar.

Each segment occupies a proportional width based on its value relative to :max. Useful for storage breakdowns, budget allocation, team capacity visualizations.

Example

<.segmented_progress
  segments={[
    %{label: "Documents", value: 30, color: "bg-primary"},
    %{label: "Images", value: 45, color: "bg-blue-400"},
    %{label: "Videos", value: 15, color: "bg-violet-400"}
  ]}
  max={100}
/>

Attributes

• segments (:list) (required) - List of segment maps. Each map must have:

  • :label (string) — accessible label for this segment
  • :value (integer) — segment value
  • :color (string) — Tailwind bg-* class for the segment color

  Example: [%{label: "Docs", value: 30, color: "bg-primary"}]

• max (:integer) - Total maximum value (sum of all segments should not exceed this). Defaults to 100.

• size (:atom) - Bar height. Defaults to :default. Must be one of :sm, :default, or :lg.

• show_legend (:boolean) - When true, renders a color legend below the bar. Defaults to true.

• class (:string) - Additional CSS classes. Defaults to nil.

• Global attributes are accepted. HTML attrs forwarded to the root <div>.

Renders a step-based progress bar as N equal segments.

Completed steps are filled with bg-primary; the current step is a lighter fill; upcoming steps are bg-secondary. Useful for multi-step forms, onboarding flows, and checkout wizards as a compact alternative to the step_tracker/1 component.

Example

<%!-- Step 2 of 4 --%>
<.step_progress_bar current={2} total={4} />

Attributes

• current (:integer) (required) - Current step number (1-indexed).
• total (:integer) (required) - Total number of steps.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. HTML attrs forwarded to the root <div>.