Progress

Track your tasks visually with our Progress Bar. Watch it fill up, one satisfying percent at a time

1  import { Progress, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox justify='center'>
4    <Progress value={50} />
5  </FlexBox>
6

API Reference

It builds on top of Radix-UI Progress

Component	Description
Progress	Chasing completion has never been so satisfying! The Progress component provides a visually compelling indication of your task's progress. Whether it's a file upload or a step-by-step form, our FlexBoxible Progress component will keep your users informed and engaged.

Prop	Type	Default	Explanation
`size`	`string`	sm	Determines the thickness of your progress bar. Choose from 'xs', 'sm', 'md', or 'lg' to best suit your layout.
`color`	`string`	primary	Colorize your progress to fit your mood or context. Choose from 'default', 'primary', 'accent', 'success', 'warning', or 'danger' to add some flavor.
`value`	`number`		The dynamic heart of progress. This numerical prop indicates the current progress, making every step count.
`max`	`number`	100	The finish line of your progress journey. Defaults to 100, but easily adjustable to suit your specific needs. Every progress has its destination.

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius