Toast

stablev1.0.0

Feedback toast from Figma SCDC node 13:66. 43px, radius 8, core/grey/500, optional Undo CTA.

Open in Figma

Live preview

Message goes here

Copied to Clipboard

Removed from favourites

Added to favourites

Deleted

Filter applied

Sort applied

Added to Watchlist

Watchlist active

Implementation

import { Toast } from '@nitro-core/ui';

<Toast
  showCta
  message="Message goes here"
/>

Design → Code

Property names stay aligned so a Figma Button maps onto the production import below.

Figma

Toast Preset

13:66

type: Default
message: Message goes here
showCta: false
withIcon: true

Code

Toast

@nitro-core/ui

type: "default"
message: "Message goes here"
showCta: {false}
withIcon: {false}

Token inspector

Background

Figma Variable

core/grey/500 #6b6e73

Nitro Token

color.toast.background

CSS

--nitro-color-toast-background

Chain

Figma → Token → CSS → Component

Error

Figma Variable

#e05667

Nitro Token

color.toast.error

CSS

--nitro-color-toast-error

Chain

Figma → Token → CSS → Component

Text

Figma Variable

core/grey/white

Nitro Token

color.toast.text

CSS

--nitro-color-toast-text

Chain

Figma → Token → CSS → Component

Radius

Figma Variable

radius/8

Nitro Token

radius.toast

CSS

--nitro-radius-toast

Chain

Figma → Token → CSS → Component

Elevation

Figma Variable

stacked 2/4/8/16/32

Nitro Token

elevation.toast

CSS

--nitro-elevation-toast

Chain

Figma → Token → CSS → Component