Pharos
JSTOR's Design System
Getting startedHelpFAQsDocumentationDevelopmentGitHubJSTORLogosTypographyColorImageryIconographyElevationVoice and toneWeb elementsGrammar and styleEditing checklistComponent statusAlertButtonBreadcrumbCheckboxCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalPaginationProgress barRadio buttonSelectSidenavSwitchTabsToastTooltipText inputTextareaToggle button groupAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Alert
Alerts inform users about important information, which can be displayed as persistent site messaging or appear based on a task that a user is trying to complete.
Example
Alert message

See live code examples in Storybook
Usage
Use alerts if you need to communicate to users in a prominent way to take action or be made aware of important information that does not interrupt their experience.
Best practices
Content guidelines
Good alert messaging should:
  • Be scannable, brief, and to the point.
  • Be written in a human-readable language.
  • Be as specific as possible. A generic statement like, "Something went wrong" doesn't provide enough context to help ground the user.
  • Include constructive advice on how to fix a problem.
  • Be no more than one or two sentences.
  • Be written in Sentence case. Capitalize the first word in the heading and proper nouns only.
  • Use appropriate punctuation. Each message should end in a period.
Variants
Accessibility
This site is powered by Netlify