Skip to content

Progress

Jump to bottom
Lenny P. edited this page May 17, 2025 · 1 revision

Progress Component

The Progress component displays a customizable progress bar with optional label, hint, and tooltip. It supports multiple progress segments via nested <Progress.Value> components, each with configurable colors, rounding, and optional percentage text.

Example Usage

<x-progress tooltip="Progress overview" min="0" max="100" label="Loading progress" hint="Progress updates live">
    <x-progress.value tooltip="Completed" value="20" :rounded="false" :showText="true" />
    <x-progress.value value="20" color="warning" :showText="true" />
</x-progress>

Props

Progress (Parent)

  • min (int, default: 0)
    Minimum value of the progress bar scale.

  • max (int, default: 100)
    Maximum value of the progress bar scale.

  • label (string|null)
    Text label displayed above the progress bar.

  • hint (string|null)
    Additional helper text shown below the progress bar.

  • tooltip (string|null)
    Tooltip text shown on hovering over the progress bar container.

Progress.Value (Child)

  • value (int, default: 20)
    Current progress value for this segment, relative to the parent min and max.

  • showText (bool, default: false)
    Whether to display the progress percentage as text inside the progress segment.

  • rounded (bool, default: true)
    Controls whether the right edge of the progress segment is rounded.

  • color (string, default: 'primary')
    Sets the color theme of the progress segment. Available options: primary, secondary, success, info, warning, danger.

  • tooltip (string|null)
    Tooltip text shown on hovering over the individual progress segment.

Overview

The Progress component renders a horizontal progress bar representing a value within a defined range. It supports nested progress segments through the <Progress.Value> child components, allowing multiple portions with distinct colors and optional progress text. The component includes accessible ARIA attributes and supports labels, hints, and tooltips for enhanced usability. Styled with Tailwind CSS, it adapts well to dark mode and can be customized extensively.

Clone this wiki locally