Ecco System
0.3.0
0.3.0
  • Please read this first!
  • Concept foundation
  • Tokens
    • Colors
    • Typography
    • Spacing
    • Border radius
    • Grid
  • Components
    • Buttons
    • Form elements
      • Checkbox
      • Checkbox Toggle
      • Date picker
      • Dropdown
      • File Selector
      • Radio button
      • Slider
      • Text fields
    • Lists
      • Tables
    • Menus
      • Global navigation
      • Tabs
      • Tree
    • Modal
    • Pagination
    • Toast and Status Bar
    • Tool tip
  • Templates
    • Web desktop templates
    • Larger mobile templates
    • Smaller mobile templates
Powered by GitBook
On this page
  • Anatomy
  • Attention
  • Usage examples

Was this helpful?

  1. Components

Toast and Status Bar

Toasts are warnings that emerge in the context of use. On the other hand, Status Bars are information about a situation about something. (e.g.: file status - approved).

PreviousPaginationNextTool tip

Last updated 4 years ago

Was this helpful?

Anatomy

The color of the component is associated with the type of information. Green as a success, yellow as an alert, and red as an error or critical failure. Neutral notifications, as in the example below the status For Analysis, are grayed out.

Attention

The Status Bar can come with an abbreviated text if they already appear in the full written style. In the example below, the status in Company Hierarchy (Hierarquia de empresas ) is abbreviated whereas, in the Documents List (Lista de documentos,), we use the full-text style.

In complex interfaces like the one shown above, we can also notify the status in an even more shortened version with just one ball. Although it is an option used as a last resort.

Usage examples

Toasts appear at the top of the screen below the header menu.

However, there are rare cases that the alert must be associated with specific information to be viewed by the user. In such cases, it is possible to adapt as shown below:

Toast Anatomy
Status Anatomy
Toast superior da tela
Toast associated with specific information