Introduction
Telescope provides a set of components for communicating feedback and status information. Each component has a defined scope, the part of the product the information relates to.
| Component | Scope | Example |
|---|---|---|
| Badge | An item (e.g. reimbursement, person, request) | The review status of an expense |
| Banner | The entire Pleo application or a sub-application (e.g. Export, Mileage, Vendor cards) | A user’s Pleo plan has been successfully upgraded |
| Callout | The entire page or a section of the page | A technical issue is preventing team reviewer permission to be shown on a page in Settings |
| Toast | The outcome of an action that a user has taken | A user’s attempt to change the language of their account failed |
Badge
Use a Badge to highlight the status of an item (e.g. reimbursement, person, request).
Badges appear right next to the item they’re highlighting the status of.
Multiple badges can be present on a page and their trigger is usually awareness or the system.
Use a Tag instead when you need to highlight an item’s category or attribute (e.g. “Admin” in relation to a user) rather than its status.
Banner
Use a Banner to provide information or feedback about the entire Pleo application or a sub-application (e.g. Export).
Banners appear at the top of the page, and there should be no more than one per page.
Their trigger is usually the system.
Use a Callout instead when the message only relates to a specific page.
Callout
Use a Callout to provide feedback or information about the entire page or a page section.
Callouts appear at the top of the page or section, depending on their context.
Multiple callouts can be present on a page and their trigger is usually the system.
Toast
Use a Toast to inform the user about the outcome of an action they’ve taken.
Toasts appear in the bottom-left corner of the screen, next to the main sidebar navigation
Multiple toasts can be shown at the same time and their trigger is usually a task.
Use a Callout instead when the message contains critical information and should persist between visits to the same page.