Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Briefly display instant feedback in a layered banner.

Use toasts to deliver a timely, straightforward response to an action.

Web
React Native
Android
Apple
Other
class AlertExample extends React.Component {
  constructor() {
    super()
    this.state = { isToastVisible: false }
  }

  triggerToast() {
    this.setState({ isToastVisible: !this.state.isToastVisible });
  }

  render() {
    return (
      <div>
        <Button
          onClick={this.triggerToast.bind(this)}>
          Trigger Toast
        </Button>
        { this.state.isToastVisible && (
          <Toast
            type="critical"
            message="Your upload failed."
            action={{ text: 'Retry', handler: () => {} }}
          />
        )}
      </div>
    )
  }
}

Props

type

oneOf
string

Determines the type of toast.

  • information
  • confirmation
  • warning
  • critical

message

oneOf
string
element

The text that appears in the toast.

action

shape

A subtle button that shows beneath the toast message.

  • text - the text to display in the button
  • handler - func to pass in to handle button click
  • href - links to another page instead of performing an action
  • target - determines how the link passed in the href prop will open
  • qaId - the data-qa-id for the button

qaId

string

A unique string that appears as a data attribute in the rendered code, serving as a hook for automated tests.

onDismiss

func

Responds to the toast being dismissed, either by the auto-dismissal timer built into the toast or by the user clicking the dismiss icon on the right.