GitHub
Copy-pasteStyled

Progress

Show percent completion with a progress bar

Progress displays determinate completion with accessible values and independently styled track and indicator parts.

Features

Installation

Progress is already installed in tamagui, or you can install it independently:

yarn add @tamagui/progress

Usage

The value property controls the percent, but you can override it by adjusting the x property.

import { Button, Progress } from 'tamagui'



export default () => (

  <Progress value={60}>

    <Progress.Indicator transition="bouncy" />

  </Progress>

)

API reference

Progress

Progress extends YStack, getting Tamagui standard props, plus:

Props

  • size

    'xs' | 'sm' | 'md' | 'lg' | 'xl' | SizeTokens | number

    A named size ("xs" to "xl", default true which matches "md") is a row in the track height table; a size token or number keeps the historical quarter-scale height.

  • value

    number | null

    Controls the percent progress.

  • max

    number

    Maximum value for calculating the percentage.

  • unstyled

    boolean

    When true, removes all default styles.

    • Progress.Indicator

    Progress.Indicator extends YStack, getting Tamagui standard props.

    Props

  • unstyled

    boolean

    When true, removes all default styles.

    • Previous

    Label

    Next

    RadioGroup

    Edit this page on GitHub.