Toast
Toast

Toast

Toast

image

Toast is an information component. It is part of Notification center.

Features and types of component configurations are the same as List cells.

Toasts support design tokens and any color tokens. Editing is enabled.

Basic parameters

Behaviour

Pressing a Toast can trigger:

  1. Transition to link
  2. Hiding toast

Toast can be swiped; it can also be fixed (e.g. if there is no internet connection).

Specs
image

Mobile has 8 px margins for Toasts.

image

Desktop has 360 px margins for Toasts.

Behaviour is tied to Grid Desktop · 1440 · 3 columns.

Recommended max length:

Title: 80 characters, including space Subtitle: 90 characters, including space

Content left

Text only

image

There are the following configurations: Default Double text Inverted text

Specs

For one line, there are 18 px top margins. For two lines, there are 8 px top margins.

Text with icon

image

There are the following configurations: Icon and text Icon and double text Icon and inverted text

Specs

Icon options:

  1. Size 40×40: PNG, SVG. The picture comes from Modulor and may have a dark or light theme option.
  2. Size 24×24: PNG, SVG. The picture comes from Modulor and may have a dark or light theme option.

The 24×24 icon is situated inside the 40×40 block. The 40×40 block may also have a color.

Content right

Content right stays always blank.

icon
All rights reserved © GR8 Tech 2023 Twitter · View on Product Hunt