| Do | Use a determinate bar when the total amount of work is known, and indeterminate when it's not. |
| Do | Choose a color variant that matches the context — accent for general progress, positive for success, warning or negative for alerts. |
| Do | Always provide a label, even if hidden — screen readers need it to announce what's loading. |
| Don't | Place icons or labels inside the bar — compose them alongside it using layout components. |
| Don't | Use a progress bar for instant actions — it's meant for operations that take noticeable time. |
| Don't | Use multiple progress bars stacked together for the same operation — use one bar with a value label instead. |