Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website: Update Button Organization pattern (bug bash) #2676

Merged
merged 4 commits into from
Feb 4, 2025
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,42 @@ Alignment refers to how buttons and actions are aligned relative to the containe

When considering internationalization (i18n), **start** and **end** are suitable substitutes for **left** and **right** alignment to account for languages that are read right-to-left ([RTL](https://developer.mozilla.org/en-US/docs/Glossary/RTL)).

![Button alignment options](/assets/patterns/button-organization/alignment-methods.png)
![](/assets/patterns/button-organization/alignment-methods.png)
!!!

### Left alignment

Actions are aligned to the left of the container or page. A common example of this alignment method is in [Modals](/components/modal) and page-level forms.
In most scenarios, align buttons to the **left side** of a container or page. The primary button should be leftmost, followed by secondary, then tertiary.

![Left alignment example](/assets/patterns/button-organization/using-left-alignment.png)
- This reinforces natural reading patterns and a conversational "dialog-like" messaging strategy.
- When combined with a consistent ordering method, the primary button is prioritized in the reading direction.
- When considering different contexts, opting for a single method helps to create consistency between constrained and unconstrained components and patterns.

A common example of this alignment method is in [Modals](/components/modal) and page-level forms.

!!! Do

In most scenarios, align buttons to the **left side** of a container or page.
Align buttons to the left side of the container.

- This reinforces natural reading patterns and a conversational "dialog-like" messaging strategy.
- When combined with a consistent ordering method, the primary button is prioritized in the reading direction.
- When considering different contexts, opting for a single method helps to create consistency between constrained and unconstrained components and patterns.
![Modal with buttons in the footer aligned to the left. The reading order goes from left to right, top to bottom.](/assets/patterns/button-organization/alignment-reading-pattern-comparison.png)

![Button alignment reading pattern](/assets/patterns/button-organization/alignment-reading-pattern.png)
!!!

### Right alignment

Actions are aligned to the right of the container or page. This alignment method is commonly used for page-level functions or actions that create and manage elements within a page.
This alignment method is commonly used for page-level functions or actions that create and manage elements within a page. The primary button should be the farthest right, then secondary, then tertiary.
shleewhite marked this conversation as resolved.
Show resolved Hide resolved

![Right alignment example](/assets/patterns/button-organization/using-right-alignment.png)
![Peering connections heading with a "Create connection" button right aligned to the container. A table of peering connections below.](/assets/patterns/button-organization/using-right-alignment.png)

### Center alignment

Actions are aligned in the middle of the container or page. This alignment method is _not_ recommended in the majority of scenarios.
This alignment method is _not_ recommended in the majority of scenarios.

- Can cause buttons to needlessly fill the horizontal space of the container
- Can cause buttons to appear detached from the content they are paired with, especially if a user has increased zoom settings within their browser

!!! Dont

![Center alignment example](/assets/patterns/button-organization/using-center-alignment.png)
![Align buttons in the center of a form container.](/assets/patterns/button-organization/using-center-alignment.png)
!!!

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.