Components
Text Text fieldButtonControlList cellsSection headingNavigation barTab barHeaderToastTooltipPageLabelCloud boxLoaderSlotEmpty stateModules
BannerBottom sheetModalDrawerAlert viewList viewCollectionScalable collectionScrollable collectionInterface editorial policyIconsSkeletonTeamChangelogToast
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:
- Transition to link
- Hiding toast
Toast can be swiped; it can also be fixed (e.g. if there is no internet connection).
Specs
Mobile has 8 px margins for Toasts.
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
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
There are the following configurations: Icon and text Icon and double text Icon and inverted text
Specs
Icon options:
- Size 40×40: PNG, SVG. The picture comes from Modulor and may have a dark or light theme option.
- 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.
On this page