Red light
Yellow light
Green light
Styles
Red light
Use only for danger states or destructive actions. Red light indicators should appear as soon as the danger state or destructive action arises. Examples of red light use cases include:
- Indicating appliances or tools that are dangerous to use with a certain medical device or condition
- Deleting content or canceling a previous action
Assertive red light
Default red light
Subtle red light
Assertive red light
Default red light
Subtle red light
Yellow light
Use only for warning or caution states. The yellow light can also be used to encourage a user to perform an action. Examples of yellow light use cases include:
- Indicating appliances or tools that require caution when used with a certain medical device or condition
- Nudging a user to perform an action that has a time limit or due date, such as confirming payment details
Assertive yellow light
Default yellow light
Subtle yellow light
Assertive yellow light
Default yellow light
Subtle yellow light
Green light
Use only for valid, safe, or successful use cases. The green light can also be used to inform the user that they have reached a checkpoint in a flow. Examples of green light use cases include:
- Indicating appliances or tools that are safe to use with a certain medical device or condition
- Successful filling out of high-impact forms or form fields, such as creating a password
- Completion of a task or checkpoint
Assertive green light
Default green light
Subtle green light
Assertive green light
Default green light
Subtle green light
Usage
Only use stoplight text when necessary. Overuse of this component will overwhelm the user and dilute the messaging.
Use the text size that matches either the surrounding text or the importance of the message. For example, use the assertive text size if the message applies to the entire page or is the most important information on that page. If the message is less important or pertains to a small part of the page or experience, use the subtle text size. Default text size is the most used stoplight text size.
Use the error messaging style for indicating form errors — this style can be seen on Form.
Note: This component is the exception to the rule of matching the icon color with the icon text. Icon colors are not accessible as text colors.
Do:
- Apply stoplight styles when necessary or when the messaging is important
- Mix stoplight styles as needed by the content
- Use for messaging that clearly falls into that stoplight category — for example, content that is clearly a success message
- Make sure the stoplight style passes the accessibility requirements of AA at minimum and AAA when possible
Don't:
- Overuse stoplight styles
- Create new or different stoplight styles
- Muddle stoplight style messaging with content that does not clearly fall into that stoplight category — for example, content that is both a caution and danger message
Content guidelines
Do:
- Clearly state the reason for the indicator in the stoplight text and, if applicable, how to fix or get rid of the state
- Use sentence case for stoplight text
- Use the text size that best applies to the situation or that matches the surrounding text
Don't:
- Use stoplight text in place of headings
- Overuse the assertive stoplight text style
User research
Study links
Primary sources (BSC user research)
No sources
Secondary sources
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that the menu is fully accessible.