Patterns

Feedback and statusWarning: Draft

How to pick the right status type and use the appropriate icons and semantic colour tokens

Introduction

Status types define how the system communicates different kinds of messages. Each status type comes with a primary use case, icon, and set of semantic colour tokens.

This visual language is shared across Telescope’s feedback and status related components and helps users quickly understand a message’s meaning and respond accordingly. Use the icons and semantic tokens outlined below when none of Telescope’s components are a good fit and you need to create something custom.

Use cases

Status	Use case
Neutral	Inform users of something that is useful, but of low importance
Info	Highlight important information without implying positivity or risk
Positive	Inform users that a desired outcome has been achieved
Warning	Inform users that an undesirable outcome is at risk of occurring
Negative	Inform users that an undesirable outcome has occurred
Discover	Highlight new features to drive adoption

Neutral

Inform users of something that is useful, but of low importance.

Information: Off

Information:

We'll be migrating everyone to the new export page soon.

Information:

Approvers will be notified with an email.

Icon	Info
Background	colorBackground``Neutral
Border	`colorBorderNeutral`
Text and icons	`colorContentNeutral`

Info

Highlight important information without implying positivity or risk.

Information: In progress

Information:

Your trial will end in 5 days.

Information:

Custom spending limits will be available once your company is verified. Verify your company

Info toast: Your invoice is being processed

Icon	Info
Background	`colorBackgroundInfo` or `colorBackgroundInfoQuiet`
Border	`colorBorderInfo`
Text and icons	`colorContentInfo` (default) or `colorContentInfoLoud` (on top of`colorBackgroundInfoQuiet`)

Positive

Inform users that a desired outcome has been achieved.

Success: Approved

Success:

Your plan has been upgraded, enjoy using Pleo!

Success:

The integration with Visma e-conomic is now active.

Icon	CircleCheck
Background	`colorBackgroundPositive` or `colorBackgroundPositiveQuiet`
Border	`colorBorderPositive`
Text and icons	`colorContentPositive` (default) or `colorContentPositiveLoud` (on top of`colorBackgroundPositiveQuiet`)

Warning

Inform users that an undesirable outcome is at risk of occurring.

Warning: Overdue

Warning:

We weren't able to debit your bank account to repay your Pleo Reserve. To keep your account active, top up your wallet

Warning:

Without assigned reviewers, no notifications are sent when the budget is low.

Icon	Warning
Background	`colorBackgroundWarning` or `colorBackgroundWarningQuiet`
Border	`colorBorderWarning`
Text and icons	`colorContentWarning` (default) or `colorContentWarningLoud` (on top of`colorBackgroundWarningQuiet`)

Negative

Inform users that an undesirable outcome has occurred.

Error: Rejected

Error:

Integrations (Ability to export expenses to third-party services): Major outage

Error:

An error occurred during your latest export. Review errors

Negative toast titled Unsupported file type: Please upload a PDF or JPG, with a Choose another file action

Icon	Negative
Background	`colorBackgroundNegative` or `colorBackgroundNegativeQuiet`
Border	`colorBorderNegative`
Text and icons	`colorContentNegative` (default) or `colorContentNegativeLoud` (on top of`colorBackgroundNegativeQuiet`)

Discover

Highlight new features to drive adoption.

New: New

New:

Keep employee access up-to-date by connecting Pleo to your people management system. Register for early access

New:

Invoices are exported by downloading a spreadsheet. Learn how it works

Icon	Rocket
Background	`colorBackgroundDiscover` or `colorBackgroundDiscoverQuiet`
Border	`colorBorderDiscover`
Text and icons	`colorContentDiscover` (default) or `colorContentDiscoverLoud` (on top of `colorBackgroundDiscoverQuiet`)

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page

This page is a draft. Its content is likely to change.