Glowup
ACTIONS · 12 / 89
ProgressButton
ProgressButton — a Material You actions component for React Native and web.
󱀫
packages/ui/src/components/ProgressButton.tsx
Live demo
Properties
9 controls
Label
Status
Idle
󰍝
Success label
Error label
Indicator
Fill
󰍝
Mode
Filled
󰍝
Icon Name
Full Width
Disabled
Usage
ProgressButton.tsx
<ProgressButton> Start navigation </ProgressButton>
Variants
The states and shapes this component is meant to be used in.
Statuses
Calculating route…
Route ready
No route found
Indicators
Uploading…
Uploading…
Modes
Filled
Tonal
Outlined
Text
Indeterminate
Syncing…
Syncing…
Customised
Downloading offline map…
Try it
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
23 on ProgressButtonProps
Filter props
󰍉
accessibilityLabel
string
Accessible name while idle. Falls back to the label.
children
string
The idle label. Also the loading label unless `loadingLabel` is set.
disabled
boolean
default: false
duration
number
default: 300
Duration of each progress step's transition, in ms.
errorIconName
MaterialCommunityIconsGlyphs
default: "alert-circle-outline"
errorLabel
string
default: "Try again"
Label once the task failed. The button stays pressable, to retry.
fullWidth
boolean
default: false
iconName
MaterialCommunityIconsGlyphs
Leading icon while idle and loading.
indicator
"fill" | "bar"
default: "fill"
How progress is drawn inside the surface: `fill` sweeps a darker (or, in the dark scheme, lighter) tone of the button across it; `bar` runs a 4dp line along its bottom edge.
labelStyle
StyleProp<TextStyle>
Applied to the label: font family, size, weight.
loadingLabel
string
Label while loading, e.g. "Calculating route…".
mode
ButtonMode
default: "filled"
onPress
() => void
Fires in every status but `loading`, where the button is busy.
onSuccessEnd
() => void
Called `successDuration` ms after the button turned to success.
progress
number
Completion while `status` is `"loading"`, from 0 to 1. Leave it undefined when the task cannot say how far along it is, for an indeterminate sweep.
progressColor
string
Colour of the fill or the bar. Derived from the button's colours if unset.
status
ProgressButtonStatus
default: "idle"
Which moment of the task to show. Controlled: the button never moves itself from one status to the next — the caller does, as the task reports.
style
StyleProp<ViewStyle>
Applied to the surface: corner radius, padding, width.
successDuration
number
default: 2000
How long the success status holds before `onSuccessEnd` fires, in ms. `0` keeps it until the caller changes `status`.
successIconName
MaterialCommunityIconsGlyphs
default: "check"
successLabel
string
default: "Done"
Label once the task succeeded.
testID
string
trackColor
string
Colour behind the bar, and behind the fill on outlined and text.