ProgressLinear

SfProgressLinear provides feedback about the duration and progression of a process.

Examples

Sizes

SfProgressLinear does not set it's own width by default, however you can control its height with the size prop. Possible values are 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'.

Customizing colors

By default, SfProgressLinear uses primary-700 as the color of the bar (customizable by setting text color) and neutral-300 as its background.

With label

SfProgressLinear should be displayed with an accessible text label. You achieve this for example: by using ariaLabel prop or by nesting the component inside a <label> with text content.

Playground