<aside> ☝
Note: These guidelines exist to enable thoughtful and consistent design decisions. The patterns illustrated do not exist in our Figma library and certain requirements may not be fully propagated across the experience.
</aside>
It is important to display calls-to-action (CTAs) in a thoughtful and consistent manner, as they are often the highest priority interaction in a given screen.
Alignment refers to how buttons are natively positioned relative to their parent container. Successful alignment enables easier visual scanning and should be determined by context and use case.
Left alignment facilitates natural visual scanning for left-to-right readers.
Most buttons and button groups found within the Driveway UI will be left aligned, as our digital experience is only represented in languages that read left-to-right at this time.
Like text, buttons should be left aligned.
Right-alignment of buttons or button groups is implemented only if the button is supporting other UI, such as a table or search results.
Right align buttons that support broader UI and functionality.
Do not right align buttons that are adjacent to left-aligned content or UI.
Center alignment is rarely called for, as it is likely to break the flow of content. Rare exceptions can be made.
Do not center buttons that are adjacent to left-aligned content or UI.
A centered CTA below high-priority centered text is an appropriate case for a centered button.
Multiple CTAs may be spaced apart only when the user is in a progressive, step-by-step flow. Read more about this use case in the Button Order section.
Vertically stacked buttons can take up valuable screen real estate. However, cases exist where stacking buttons is an appropriate approach.