progressBar
Create horizontal progress bars to show progress towards a goal.
Usage
const progress = block.progressBar({
value: 75,
max: 100,
title: 'Upload Progress',
})Props
| Prop | Description | Type | Required | Default |
|---|---|---|---|---|
| title | Title displayed above the progress bar | string | No | undefined |
| description | Description text below the title | string | No | undefined |
| value | Current progress value | number | Yes | — |
| max | Maximum value (100% point) | number | Yes | — |
| label | Label displayed on the progress bar | string | number | No | undefined |
| variant | Visual style variant | 'default' | 'neutral' | 'warning' | 'error' | 'success' | No | 'default' |
Returns
Returns a progress bar block that can be returned from a handler or passed to io.message().
Examples
Basic progress bar
return block.progressBar({
title: 'Completion',
value: 65,
max: 100,
})With label
return block.progressBar({
title: 'Storage Used',
value: 7.5,
max: 10,
label: '7.5 GB / 10 GB',
})Success variant
return block.progressBar({
title: 'Tests Passed',
value: 42,
max: 42,
variant: 'success',
label: '100%',
})Warning variant
return block.progressBar({
title: 'API Quota',
value: 8500,
max: 10000,
variant: 'warning',
label: '85% used',
})Error variant
return block.progressBar({
title: 'Disk Space',
value: 95,
max: 100,
variant: 'error',
label: 'Critical',
})Inside a KPI card
return block.kpiCard({
name: 'Project Progress',
value: '75%',
chart: {
chartType: 'progress-bar',
value: 75,
max: 100,
variant: 'default',
},
})