c797e8446d
### Changes - Adds status icons page - Moves action menus page to the UI development docs folder - Fixes sentence fragment
1.6 KiB
1.6 KiB
Status Icons
Browsertrix uses a standard set of status icons to communicate success, neutral, and failure states throughout the app. Colors are used only to reinforce their distinct shapes which have been chosen so they remain accessible to those who may not be able to distinguish differences based on color alone.
Status icons always use filled icon variants (when available), as opposed to buttons or actions which use strokes.
When used without labels, status icons should include tooltips to provider further clarity as to what they indicate.
Implementation
| Status | Description |
|---|---|
| :bootstrap-slash-circle-fill: Empty | Used for empty states where no data is present |
| :bootstrap-hourglass-split: Waiting | Used when a process is queued but has not started |
| :btrix-status-dot: Running | Used when a process is actively running, should always be animated |
| :bootstrap-check-circle-fill: Success | Used for positive / successful states |
| :bootstrap-dash-square-fill: Neutral | Used for ambiguous states, generally good but could be better |
| :bootstrap-exclamation-square-fill: Less Neutral | Same as neutral but with more caveats |
| :bootstrap-x-octagon-fill: Warning | Used for cautionary states and actions with caveats |
| :bootstrap-exclamation-triangle-fill: Severe | Used for serious errors and actions that should be taken with extreme care |