Progress

Last updated

2026-10-04 UTC

Demo

progress/demo.vue

40%

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(40)
function step(d: number) {
  value.value = Math.max(0, Math.min(100, value.value + d))
}
</script>

<template>
  <div class="flex flex-col gap-5">
    <YlfProgress :value="value" aria-label="Brand progress" />
    <YlfProgress :value="value" variant="accent" tone="green" aria-label="Completion progress" />
    <div class="flex items-center gap-3">
      <YlfButton size="sm" variant="secondary" @click="step(-10)">
        −10
      </YlfButton>
      <YlfButton size="sm" variant="primary" @click="step(10)">
        +10
      </YlfButton>
      <span class="text-sm op-70">{{ value }}%</span>
    </div>
  </div>
</template>

Progress uses Reka UI for progressbar role and ARIA values, with token visuals and optional vivid accent fill.

Props

Prop	Description	Type	Default
value	Current progress; null means indeterminate	number | null	0
max	Maximum	number	100
variant	Fill	brand | accent	brand
tone	Accent hue, only for accent	blue | sun | cyan | coral | pink | green	blue

Tone defaults to blue and affects accent only. Legacy aurora aliases accent. Keep colors consistent for equivalent states within a workflow.

Provide a purpose name, such as aria-label="Upload progress". Finite values clamp to 0…max; invalid max falls back to 100 so visuals and ARIA agree. Null, NaN and infinite values are indeterminate and omit aria-valuenow. Reduced motion uses a static progress segment.