Unifying buttons

[alyblenkin]

Blocked by #5607

Unify all buttons styles with M3. There are five types of common buttons: elevated, filled, filled tonal, outlined, and text in their guidelines. We will use all of the button styles apart from "tonal", as I haven't figured out a good use case for this usage.

It would be great to also increase the text size to LabelLarge text appearance (and potentially padding to match) of all Material 3 button styles because our layouts are very text heavy in comparison to the mockups M3 uses.

In the example actions below, I've called out where the buttons are full-width (currently implemented using MainMenuButton and StartNewFormButton) vs default (using Button or MaterialButton), and where we are using high-emphasis/primary buttons (filled) and medium-emphasis secondary buttons (outline).

Example actions	Current button style	Future button style
Landing screen	Outline, compact and narrow, with icon	Filled primary button, outline, full-width, with icon - Figma
Main menu	Elevated, filled primary button, outline, full-width, icon & metadata	Same - Figma
Settings page	Text and blue icons spaced out, hint text	Text with icon, hint text - Figma (Listing items, like what we did with the preferences dialog )
Exit dialogs	Filled primary button, outline secondary buttons, full-width, with icon	Same - Figma
Confirmation dialog (i.e. deleting saved forms, change admin password)	Text	Filled primary "Ok", text "Cancel"
Start GeoPoint / change location	Filled, full-width, small radius	Filled, full-width
GeoPoint widget	Text	Filled primary "Ok", text "Cancel"
Select one from map widget	Filled, compact with icon	Filled primary button with icon
Back and next	Text with icon	Filled "Next" when text is entered, outline "Back", with icon - Figma
Go to start and Go to End	Outline with small radius	Outline
Sort by filter	Text with icon with light grey text	Text with icon
Icons	Combination of filled and outlined	May update in the future 😊

Other notes:
In some places, we have two primary buttons, which we want to avoid. An example of this is when the user is deleting saved drafts, "select all" and "delete selected" are both filled. The primary / high-emphasis is on the "delete selected" action, and "select all" is a secondary outlined button.

[seadowg]

Just marking this as "needs discussion" for the moment, as we'll need to flesh this out more before doing anything.

[seadowg]

Moving this out of the milestone as I don't think we'll prioritize for this release.

[seadowg]

Just a note from a recent discussion with @alyblenkin: it's likely that we want to up the text size (and potentially padding to match) of all Material 3 button styles. This might mean just bumping the font size on the LabelLarge text appearance.

[seadowg]

Blocking this on #5607 as it won't make sense to implement until after.

[alyblenkin]

Notes:

• Define categories of buttons: for example, full-width buttons in the main menu and widgets
• Everything else is from material
• Specifying the places we need to update things
• What are the things we don't like about the material pattern now - bumping the text size

[alyblenkin]

@seadowg, I may have gone over the top with this story 😅. Let me know if I missed anything or if I should clarify anything.

[seadowg]

I've added some parenthesis on how default vs full-width is implemented. This is ready to go!

[seadowg]

Unblocking as we'll do this as part of the same PR as #5607.

[seadowg]

@alyblenkin one thing I'm not sure about: dialogs in Material use text button for dialog options. Do you really want to switch them to filled?

[alyblenkin]

Let's keep our custom exit / save as draft dialog as is!

For the others, we should have the action as a filled button, and a text button to link back. For the example below, we would have a text button for "Cancel" and a filled button for "Save."

I know they want to use two text buttons, but that's not giving the user the correct feedback. Happy to chat about this, if it will be a lot of work! It's not the end of the world if we can't do it, but it would make it a better user experience.

• Navigation is a link/ text button
• Action is a button

Figma example | Article about this UX pattern

[seadowg]

I know they want to use two text buttons, but that's not giving the user the correct feedback. Happy to chat about this, if it will be a lot of work! It's not the end of the world if we can't do it, but it would make it a better user experience.

Makes sense! I just wanted to check seeing as we're deviating from Material 3 itself. I'll give this a go.