Skip to content

Allow Snackbar component to support two actions for better user interaction and flexibility #69603

@Jinksi

Description

@Jinksi

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

Gmail snackbar actions

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.

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions