ActionPrompt is a message that asks the reader to choose between options. It helps the reader stay informed, fix a problem, or get more out of what they are already doing, and needs a decision before they move on.
It holds a status icon, a title, a description, and the buttons that resolve the choice. The trailing control carries either a dismiss or an overflow menu, and a media slot is available for an illustration or avatar.
Use it when the product needs a decision before the reader can continue. A message that only informs is an InfoPrompt.
Do
Pick Tone by which job the message is doing. Info and Success keep the reader informed. Error and Warning point at something to fix. Proposition offers more from what they are already doing. Academy points to help and support
Start every button label with a verb naming the next step or destination
Toggle off Primary button for a single secondary action
Swap the trailing control to an overflow menu when the prompt needs more options than two buttons carry
Toggle off Show Title where the description carries the message alone
Don’t
Don't use ActionPrompt without a button — that's InfoPrompt
Don't pair two primary buttons
Don't label a button with a generic acknowledgement (OK, Continue, Learn more)
Don't use the media slot to carry status — the icon carries Tone
Keywords: action, prompt, decision, buttons, dismiss, menu, message, cta, mobile
TitleShort description of what happened and what to do next.
TitleShort description of what happened and what to do next.
SecondaryPrimary action
ActionPrompt
ActionPrompt
Description
ActionPrompt is a message that asks the reader to choose between options. It helps the reader stay informed, fix a problem, or get more out of what they are already doing, and needs a decision before they move on.
It holds a status icon, a title, a description, and the buttons that resolve the choice. The trailing control carries either a dismiss or an overflow menu, and a media slot is available for an illustration or avatar.
Use it when the product needs a decision before the reader can continue. A message that only informs is an InfoPrompt.
Do
Pick Tone by which job the message is doing. Info and Success keep the reader informed. Error and Warning point at something to fix. Proposition offers more from what they are already doing. Academy points to help and support
Start every button label with a verb naming the next step or destination
Toggle off Primary button for a single secondary action
Swap the trailing control to an overflow menu when the prompt needs more options than two buttons carry
Toggle off Show Title where the description carries the message alone
Don’t
Don't use ActionPrompt without a button — that's InfoPrompt
Don't pair two primary buttons
Don't label a button with a generic acknowledgement (OK, Continue, Learn more)
Don't use the media slot to carry status — the icon carries Tone
Keywords: action, prompt, decision, buttons, dismiss, menu, message, cta, mobile
Properties
TonepropositionDevicedesktopIcontrueIcon SlotIcon/mdShow TitletrueDescriptionShort description of what happened and what to do next.Primary ButtontrueDismiss/MenutrueDismiss/Menu SwapxmarkShow Media 1trueShow Media 2true
Nested instances
TitleTextButton/SecondaryButton/Primary
/FEEDBACK
01 / 06Helcim
Working with Trace has been a delightful experience that made me grow as a leader.
Rodolfo Ferro CasagrandeHead of Design
010203040506
If I had to point out at one of her strongest skills, that would definitely be the ability to look at a design piece, understand that something is off, and turn that vague feeling into an objective and actionable feedback.
This ability to effectively deliver feedback has brought a lot of value to the team output and increasing their work quality.
Trace was instrumental in our product design efforts to deliver a clean and scalable design system that made development smooth and efficient.
Her ability to balance design thinking with practical execution made her contributions incredibly valuable from both a product and engineering perspective.
She advocated for us, fostered collaboration, and invested in everyone’s growth. Her leadership created an environment where we could do our best work and support each other.
I learned so much from her about what it means to lead.
When the client struggled with inconsistencies and scalability issues in their design, Trace’s deep understanding of both design principles and technical constraints allowed her to implement a solution that not only addressed these challenges but also improved the overall user experience.
Her innovative approach to simplifying the design system was a game-changer, leading to greater consistency, efficiency, and ease of use for the team. Trace’s ability to listen closely to client needs and transform those into actionable, impactful solutions is a testament to her expertise and dedication to delivering excellence. Her contributions were integral to the success of the project, and the client is still reaping the benefits today.
I appreciate Trace's organized and analytical mind. She communicates clearly and helps add extra clarity to processes that might otherwise be muddy and unorganized.
I loved how she brought fresh ideas to the table, explained everything clearly, and kept everyone on track toward our goals.
Trace works fast without sacrificing quality, quickly grasps complex information, and always delivers valuable insights. She’s approachable, genuinely cares about the work and was a true pleasure to collaborate with. I can’t recommend her enough!
What’s up, what’s up.
Currently at NoterroNoterro, building a design-to-code workflow loop with a design system that’s readable by AI on Figma and from the codebase.