Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Toast
Toasts are non-disruptive messages that appear at the top right corner of the UI to provide quick, at-a-glance feedback on the outcome of an action.
Example
Have a toast!

See live code examples in Storybook
Usage

Use toasts to show a confirmation of non-critical actions from the user. For example, you might show a toast to inform the user that their recent action of saving an item to the workspace was successful.

Best practices
Dos
  • Use for short messages to confirm an action as feedback to the user. For example, you might show a toast message to inform a user that their recent action was successful
  • Toasts should be concise, scannable and informative—users shouldn't need to spend a lot of time figuring out which action they just took and where they could go next (e.g., iew in workspace)
  • States: Can be used specifically for success and error messages
  • Display toasts one at a time, the newest toasts should appear above the most recently displayed toasts
  • Toasts should always be dismissible (the "x" in the top right corner)
  • Use appropriate punctuation; each message should end in a "."
Don'ts
  • Not to be used for marketing information or in-app feature messages
  • Not to be used for system errors, outages, etc. Use an alert or banner for these needs.
Content guidelines Toast messages Success

Toast messages are simple, concise and human-sounding. The message informs the user of the outcome of an action.

They should be written in a noun + verb form.

  • "The item (noun) was saved (verb) to Martin Luther King Research"

Toast messages should be human sounding, and not as system-centric:

  • "The item was saved to Martin Luther King Research."

  • "Item saved to Martin Luther King Research."

Avoid unnecessary terms, for example, don't use "successfully" in banners that confirm an action has been completed, the success toast variant will suffice.

Error

When a user experiences an error, it should include an actionable step that the user can take on their own or seek help from support.

State I am a success toast I am an error toast Accessibility Relevant WCAG guidelines
  • 3.2.4 Consistent Identification
  • 1.4.13 Content on Hover or Focus AA
Importance

Allows the user to receive a quick notification

Visual expectations
  • Toast notification should always appear in the same location on the screen

  • Notifications should appear for at least 5 seconds

    • This time should be increased by 1 second for every 120 words
Code expectations
  • Toasts should be wrapped in aria-live-region and have role="alert", having both maximizes cross-browser compatibility and assistive technology pairings
  • When focus is on the toast, pause the timer
Expected actions Screen reader

Reads the notification as soon as it appears on screen

Keyboard

  • Toast gets added into the focus order.

    • When toast is open, the first tab goes to first the first intractable element in the toast notification

    • After it is closed, focus will be placed on the element after the one that triggered the toast