previously Vue Storefront Build Better Storefronts

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. You can change these values in your Tailwind configuration or override them for a single element using important modifier.

Learn more about overriding default styles in Storefront UI.

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.

Accessibility notes

ProgressLinear uses native <progress> HTMLElement] to [allow screen readers treat it as an indicator of progress status.

Playground