CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References
  • Changelog
  • Contact us

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Organisms

Message

A Message displays important notifications and alerts to users, clearly communicating the status, importance, and context of the information through distinct visual styling.

When to use

Use the Message component when you need to:

  • Communicate important status information to users such as errors, warnings, success confirmations, or general information

  • Display feedback about user actions (such as form submissions or system processes)

  • Alert users to critical information that requires their attention

  • Provide contextual notifications within a page or section

  • Inform users about system status changes that affect their experience

When not to use

Do not use the Message component when:

  • The information is not time-sensitive or does not require the user's immediate attention

  • There are multiple notifications that could overwhelm the user

  • The information would be better presented as inline form validation

  • You need to display complex information that requires user interaction beyond acknowledging the message

  • You need to collect user input (use a form component instead)

  • The message would interrupt the user's workflow unnecessarily


Best practice guidelines

  • Clear and concise: Keep message content brief and to the point. Focus on communicating the essential information using plain language.

  • Use appropriate message types: Apply the correct message type (error, warning, success, information) based on the context and urgency of the information.

  • Visual differentiation: Ensure each message type is visually distinct through consistent use of colour, icons, and styling to help users quickly understand the nature of the message.

  • Actionable content: When relevant, include clear instructions on what the user should do next or provide links to additional resources.

  • Positioning: Place messages where they are contextually relevant. System-wide messages should appear at the top of the page, while context-specific messages should appear near the relevant content.

  • Accessibility: Ensure message components meet accessibility standards including sufficient colour contrast, appropriate use of ARIA attributes, and logical focus order.

  • Responsiveness: Design messages to be fully responsive and readable across all device sizes.

Variations

Message types:

  • Error: Used to indicate critical problems that prevent an action from completing successfully

  • Warning: Used to alert users about potential issues that require attention but don't prevent actions

  • Success: Used to confirm successful completion of an action or process

  • Information: Used to provide non-critical updates or general information

Display variations:

  • Desktop view: Full-width presentation with clear visual indicators

  • Mobile view: Responsive adaptation that maintains visibility and readability on smaller screens


Accessibility

According to the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Message component has been assessed against WCAG 2.2 requirements with the following results:

The component passes most of the applicable WCAG criteria, including:

WCAG Criterion
Level
Description

1.3.1 Info and Relationships

A

Information and relationships can be programmatically determined

1.4.1 Use of Colour

A

Colour is not used as the only visual means of conveying information

1.4.3 Contrast (Minimum)

AA

Contrast meets the minimum 4.5:1 requirement

1.4.11 Non-text Contrast

AA

All user interface elements have sufficient contrast

2.4.6 Headings and Labels

AA

Headings and labels describe topic or purpose

3.2.4 Consistent Identification

AA

Messages are labelled consistently

Security

The Message component does not typically store or process sensitive information itself. However, when implementing this component, consider:

  • When displaying error messages, avoid revealing sensitive system information that could be exploited

  • Sanitize any dynamic content displayed within messages to prevent XSS attacks

  • If messages contain links to external resources, ensure proper validation is in place

Component inspiration and uplift

This component has been modelled after the Page Alerts component from the former Australian Government Design System (AGDS). It has been uplifted by Salsa Digital, as the custodian of the CivicTheme Design System, in the following ways:

  • The Page Alerts component has been implemented as two key alert types:

    • A global-level page alert, which appears at the top of the page, above the header

    • A body-level page alert, which can appear anywhere within the body content of the page

  • Each alert type comes in four different variants with clear colour and icon distinctions:

    • Red = Error (for problems)

    • Orange = Warning (for cautionary information)

    • Green = Success (for positive confirmations)

    • Blue = Information (for general updates)

  • Message alerts use background colours for greater prominence on the page

  • Message alert colours have been updated to meet WCAG 2.1 when sitting under white text

  • Iconography has been moved to the top left of the message to follow natural eye movement patterns


User research on this component

★★★★☆ Confidence rating = High (Based on comparative analysis and heuristic evaluation)

While specific user research for the CivicTheme Message component is not documented in the provided materials, this component has been evaluated against established usability heuristics and patterns widely tested across government design systems.

Messages are a fundamental component of user interface design with well-established patterns and best practices. The implementation in CivicTheme follows these established patterns, with different message types (error, warning, success, information) clearly distinguished through colour, iconography, and visual styling.

Heuristic evaluation against Nielsen's usability principles shows strong alignment, particularly with principles such as visibility of system status, error prevention, and help users recognize, diagnose, and recover from errors.

For a more comprehensive user research assessment, specific testing with end users would be beneficial.

Known issues

  • Mobile responsiveness: On very small screens, longer message text may create readability challenges, requiring careful content management

  • Colour reliance: While colour is not the only differentiator between message types, the strong colour association may still create cognitive barriers for some users with colour vision deficiencies

  • Dismissible functionality: The current implementation does not include dismissible functionality, which may be desired for certain message types

More research needed

More user research is needed in the following areas:

  • User preference for persistent versus dismissible messages across different contexts

  • Effectiveness of message placement (top of page versus inline) for different message types

  • Testing with users who have cognitive disabilities to ensure message meaning is clear without relying on colour

  • Research into the ideal timing for temporary messages that may appear and disappear automatically

  • Comparative analysis of different icon styles for optimal recognition across different user groups

Help improve this component

To help make this component useful and up-to-date, you can:

  • Contribute to our message component discussion in the CivicTheme GitHub repository

  • Submit your user research findings to help improve the message component

  • Propose a change to the message component through a pull request


Resources

  • Storybook

  • GitHub

References

  • Nielsen Norman Group. (2020). Error Message Guidelines. https://www.nngroup.com/articles/error-message-guidelines/

  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/

  • Australian Government Design System. (2021). Page Alerts Component.

Changelog

Version
Date
Changes

1.7.0

March 2024

Updated to ensure WCAG 2.2 compliance

1.6.0

2023

Refined colour contrast for better accessibility

1.5.0

2023

Added information message type

Contact us

PreviousListNextMobile Navigation

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

contributing section
Figma
Getting Help