Documentation Playground
Skip to content
Docs

Progress

Displays a progress bar related to a task. 
<.box max_width="300px"><.progress value={50} /></.box>

API Reference

This component wraps the Progress primitive and supports common margin props.

Prop Type Default Description
class string nil Additional CSS classes
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
max integer 100 Maximum progress value
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
radius string — Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
size string "2" Progress size
style string nil Additional inline styles
value integer — Current progress value
variant string "surface" Progress variant
class Additional CSS classes
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
max Maximum progress value
Type integer Default 100
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
radius Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type string Default —
size Progress size
Type string Default "2"
style Additional inline styles
Type string Default nil
value Current progress value
Type integer Default —
variant Progress variant
Type string Default "surface"

Examples

Size

Use the size prop to control the size.

<.flex direction="column" gap="4" max_width="300px">
  <.progress value={25} size="1" /><.progress value={50} size="2" /><.progress
    value={75}
    size="3"
  />
</.flex>

Variant

Use the variant prop to control the visual style.

<.flex direction="column" gap="4" max_width="300px">
  <.progress value={25} variant="classic" /><.progress value={50} variant="surface" /><.progress
    value={75}
    variant="soft"
  />
</.flex>

Color

Use the color prop to assign a specific accent color.

<.flex direction="column" gap="4" max_width="300px">
  <.progress value={20} color="indigo" /><.progress value={40} color="cyan" /><.progress
    value={60}
    color="orange"
  /><.progress value={80} color="crimson" />
</.flex>

Radius

Use the radius prop to assign a specific radius value.

<.flex direction="column" gap="4" max_width="300px">
  <.progress value={25} radius="none" /><.progress value={50} radius="small" /><.progress
    value={75}
    radius="full"
  />
</.flex>

With controlled value

Use the value prop to provide a precise indication of the task progress.

<.progress value={75} />
← Popover Radio →