-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
What problem does this address?
The Snackbar
component is currently limited to a single action button. It will be valuable for plugin authors and users if the Snackbar
allows two simple actions, enhancing the user experience by enabling contextual decision-making.
- User feedback prompts: “Are you satisfied?” → Yes / No
- Critical undo actions: “Message sent” → Undo / View message
- Task confirmations: “Save changes?” → Save / Discard
gutenberg/packages/components/src/snackbar/index.tsx
Lines 119 to 126 in c300edf
if ( actions && actions.length > 1 ) { | |
// We need to inform developers that snackbar only accepts 1 action. | |
warning( | |
'Snackbar can only have one action. Use Notice if your message requires many actions.' | |
); | |
// return first element only while keeping it inside an array | |
actions = [ actions[ 0 ] ]; | |
} |
Restricting Snackbar
to one action also forces developers to use cumbersome workarounds (as evidenced by WooPayments’ custom implementation below), creating inconsistency across WordPress experiences.
Allowing two actions aligns with established UX patterns in systems like Gmail, ensuring a more intuitive, efficient, and accessible decision-making process for users.
What is your proposed solution?
Remove the single-action limit and allow up to two actions. To keep the UI clean and easy to read, set a character limit for action label/text.
Additional context
We've implemented a two-action Snackbar
in WooPayments, albeit with workarounds that will be removed once this is available upstream from wp.components
.
cc @jasmussen @elizaan36 @mirka @ciampo who were involved with design spec discussions related to the WooPayments implementation of a two-action snackbar in Automattic/woocommerce-payments#10323.