Progress

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

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

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 flexible 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.