There is a need to ensure consistency in the design of buttons across the OpenEdX mobile platform. Currently, there are variations in button styles and sizes, which can lead to a confusing user experience. This ticket aims to address this issue by implementing a standardized button design system that can be applied consistently throughout the platform. Here are the general heuristics for these updates:
Full width (not variable width) buttons by default (button width = screen width - margins)
Side by side buttons in step sequences, with their directional icons on the side that matches the direction they point in
Stacked buttons by default for options/choices
By default, non-directional icons should be placed immediately to the left of text inside buttons
Text is centered within buttons (except certain limited exceptions, e.g. social auth buttons have left-aligned text)
Exceptions exist with external dependencies/branding requirements
There is a need to ensure consistency in the design of buttons across the OpenEdX mobile platform. Currently, there are variations in button styles and sizes, which can lead to a confusing user experience. This ticket aims to address this issue by implementing a standardized button design system that can be applied consistently throughout the platform. Here are the general heuristics for these updates: