# Feedback and status

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

Tabs: [About](/patterns/feedback-and-status/feedback-and-status.about.md) · [Status types](/patterns/feedback-and-status/feedback-and-status.status-types.md) · [Components](/patterns/feedback-and-status/feedback-and-status.components.md) · [Accessibility](/patterns/feedback-and-status/feedback-and-status.accessibility.md) · [Resources](/patterns/feedback-and-status/feedback-and-status.resources.md)

## 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](/patterns/feedback-and-status/feedback-and-status.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](/patterns/feedback-and-status/feedback-and-status.status-types#neutral)   | Inform users of something that is useful, but of low importance     |
| [Info](/patterns/feedback-and-status/feedback-and-status.status-types#info)         | Highlight important information without implying positivity or risk |
| [Positive](/patterns/feedback-and-status/feedback-and-status.status-types#positive) | Inform users that a desired outcome has been achieved               |
| [Warning](/patterns/feedback-and-status/feedback-and-status.status-types#warning)   | Inform users that an undesirable outcome is at risk of occurring    |
| [Negative](/patterns/feedback-and-status/feedback-and-status.status-types#negative) | Inform users that an undesirable outcome has occurred               |
| [Discover](/patterns/feedback-and-status/feedback-and-status.status-types#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]()

| 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]()

| 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`) |