Toast

Type: React component

A message rendered in Text using a connotation color as its background, specifying the severity of the message.

Toast is suited for a short (popup) message which is not interruptive, meaning the corresponding content is still visible while showing the message.

If the message should be interruptive, consider using StateMessage or CompactStateMessage instead.

Props

  1. connotation

    (Optional)

    Type: String

    Specifies the meaning and/or severity of the given context. The possible values are:

    • 'info'

    • 'success'

    • 'warning'

    • 'error'

    Default value

  2. content

    (Required)

    Type: React node

    The human readable message displayed in the component, displayed inside a Text component if you use a string. If you want to display inlines (such as a TextLink component) inside your message. You have to provide the Text component yourself. In that case, take care to set the colorName and fontStackName prop as appropriate. For the colorName prop, use toast-${connotation}-color. For the fontStackName prop, use the value you would have provided to this Toast, or omit it if you want to use the default "interface" font.

    Related links

  3. icon

    (Optional)

    Type: FDS~Icon

    Default value

  4. fontStackName

    (Optional)

    Default value