Action Prompt

Tells users of an action they need to, should, or might want to take. Use the intent that matches the urgency — negative for essential tasks, warning for important ones, positive to convey success, and neutral to introduce features. Supports an optional avatar icon, subtitle, dismiss button, and one or two action buttons.

Payment details are missingYou need to add payment information before you can publish this event.
Your event is liveRSVPs are open and your event page is visible to attendees.
Sponsorship deadline approachingYou have 3 days left to submit your sponsor deliverables.
Connect your payment accountSet up payments to collect fees and sponsorship contributions.

preview

Sponsorship deadline approachingYou have 3 days left to submit your sponsor deliverables.

props

PropTypeDefaultDescription
titlestringrequiredHeadline text for the prompt.
subtitlestring—Supporting body text below the title. Omit to hide.
intent'negative' | 'positive' | 'warning' | 'neutral''neutral'Drives the background, text, and button colour scheme.
avatarbooleantrueWhether to show the avatar icon circle on the left.
iconstring'ph-user'Phosphor icon class for the avatar (e.g. 'ph-calendar'). Only the icon variant of avatar is used.
dismissiblebooleanfalseWhether to show the dismiss (×) button in the top-right.
onDismiss() => void—Called when the dismiss button is clicked. Use to remove the prompt from the UI.
primaryAction{ label: string; onClick?: () => void }—Primary action button. Providing this alone shows a single-action layout.
secondaryAction{ label: string; onClick?: () => void }—Secondary action button. Requires primaryAction — together they show a multiple-action layout.

usage

Action prompts are contextual and direct. They should appear close to the relevant content — on the same screen, not in a modal. The intent must reflect real urgency. Don’t use negative for something that can wait, and don’t use warning when no action is strictly needed.

When to use

  • To surface an essential or time-sensitive task the user hasn't completed
  • To confirm a state has changed — e.g. an event going live
  • To introduce a feature or action the user may not know about
  • When a single, focused call to action is needed without a full modal

Do not use

  • Use negative sparingly — until something is truly urgent, use warning instead
  • Stack multiple action prompts of the same intent on a single screen
  • Trigger a negative prompt for tasks that are optional or informational
  • Use as a replacement for toast notifications or system-level alerts
Sponsorship deadline approaching3 days left to submit your sponsor deliverables.
DoMatch the intent to real urgency. Warning is right for something important but not yet critical.
Sponsorship deadline approaching3 days left to submit your sponsor deliverables.
Don’tDon’t use negative unless the task is truly essential and urgent. Reserve it for blocking issues.

intents

Choose the intent based on the consequence of the user ignoring the prompt — not simply whether the value is high or low. The hierarchy is: neutral (inform), positive (confirm success), warning (urge action), negative (prevent a critical failure).

Payment details missingAdd payment information before you can publish this event.
NegativeUse only when something essential is missing or will break. Reserve for blocking issues the user must fix — like missing payment details before going live. Use most sparingly.
Your event is liveRSVPs are open and your event page is visible to attendees.
PositiveUse to confirm success or a ready state — like an event going live or a sponsorship package being approved. Encourages without demanding.
Sponsorship deadline approachingYou have 3 days left to submit your sponsor deliverables.
WarningUse to get users to take an important action before it becomes critical — a deadline approaching, a low RSVP rate, or deliverables falling behind. The default for most urgent prompts.
Connect your payment accountSet up payments to collect fees and sponsorship contributions.
NeutralUse to introduce a feature or inform users of an action they didn't know they needed to take. No urgency — purely helpful.

types

The number of action buttons is determined by which action props you provide. Match the type to how much choice the user should have — fewer options keeps the prompt focused and increases the likelihood of the primary action being taken.

Sponsorship deadline approaching3 days left to submit your deliverables.
No actionInform only. The dismiss button lets the user acknowledge the message. No required choice.
Sponsorship deadline approaching3 days left to submit your deliverables.
Single actionOne clear call to action. Use when there’s only one reasonable response to the prompt.
Sponsorship deadline approaching3 days left to submit your deliverables.
Multiple actionsA primary and secondary option. The secondary should always be a deferral — not a destructive action.

booleans

Three boolean props let you adapt the prompt to its context. The avatar adds visual identity and helps the prompt stand out. The subtitle gives space for explanation. Dismissible lets the user acknowledge and move on without taking action.

Avatar

Connect your payment accountSet up payments to collect fees.
Avatar onAdds visual weight and helps the prompt feel distinct from surrounding content. Customise the icon to match the context — only use the icon avatar variant.
Connect your payment accountSet up payments to collect fees.
Avatar offUse without an avatar when screen space is tight or when the prompt sits within a list of similar items.

Subtitle

Payment details missingAdd payment information before you can publish this event.
With subtitleUse when the title alone doesn’t fully explain what needs to be done or why it matters.
Payment details missing
Without subtitleWhen the title is self-explanatory and the action is clear, omit the subtitle to keep the prompt compact.

Dismissible

Your event is liveRSVPs are open and your event is visible to attendees.
DismissibleAllow dismissal when the prompt is informational and the user can safely ignore it. Always wire up onDismiss to remove the prompt from the UI.
Payment details missingYou cannot publish until payment is added.
Non-dismissibleRemove the dismiss button when the prompt represents a required action the user cannot skip — such as a blocking negative state.