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 (opens new window) or override them for a single element using important modifier
(opens new window).
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>
(opens new window) HTMLElement] to [allow screen readers treat it as an indicator of progress status (opens new window).