Toast

Type: React component

How to get Toast?

JavaScript

import { Toast } from 'fds/components';

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: String

    The name of the icon displayed in the component.

    This should be one of the Font Awesome icons. Do not include the fa- prefix, just use the icon names as-is from the documentation.

    Default value

  4. fontStackName

    (Optional)

    Type: String

    The name of the font stack to render the textual content of the component in. This will set the "font-family" CSS property based on a predefined set of values. Each font stack represents a certain use case in which it should be implemented, which is described below.

    Can be one of:

    • content: a serif font, should be used for articles and longer (regular) content.

    • interface: a sans-serif font, should be used for labels in components and other interface elements.

    • monospace: a fixed-width font, should be used for code (examples).

    Default value