Background
As we've introduced loading states in components like Menu and Table, there are use cases where we may need to show a loading state within a Button. This is particularly useful for short loads directly related to the Button’s action (e.g. "Save" or "Publish"), preventing duplicate actions and giving immediate feedback that the action is being processed.
This task is to decide whether to implement a button loading state and decide on the best visual approach to communicate the loading in Button in a clear and accessible way.
NOTE: Our recommendation so far has been to use the disabled Button state, but we should consider if this should be our official guidelines or if another interactive state is needed.
Considerations
- As recommended in the WCAG guidelines: User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. Since the loading button would be inactive, the minimum 4.5:1 for text is not necessary.
- Anyway, in case we include an indicator to communicate the loading within the Button (e.g. an spinner) it should be 3:1 contrast.
Design proposals
Design spec
Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.
| Component spec sheet |
Open questions
- There are many progress elements currently used across projects. Do we want to introduce a new one?
Acceptance criteria (or Done)
Design
- Decide if it worths implementing this new loading state
- Design the Figma spec sheet and add it in this task
- Update the component in the Figma library. This step will be done by a DST member.
- Update the guidelines in Codex accordingly
Code
- Implement the component in Codex