Toast

How to get Toast

import { Toast } from 'fds/components';

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

# Name Type Description
1. [connotation] String

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

  • 'info'

  • 'success'

  • 'warning'

  • 'error'


  Default value
"info"
2. content 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] String

The name of the icon displayed in the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
null
4. [fontStackName] 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
"interface"

Related links

Was this page helpful?