Snackbar

<State initial={{ snack: null }}>
  {({ state, setState }) => (
    <div>
      <div className="docs-inline-group">
        <Button
          onClick={() => {
            setState({
              snack: {
                id: guid(),
                message: 'Error Clicked!',
                type: 'error',
              },
            })
          }}
        >
          Error
        </Button>
        <Button
          onClick={() => {
            setState({
              snack: {
                id: guid(),
                message: 'Saved Clicked!',
                type: 'success',
              },
            })
          }}
        >
          Save
        </Button>
        <Button
          onClick={() => {
            setState({
              snack: {
                id: guid(),
                message: 'Warning Clicked!',
                type: 'warning',
              },
            })
          }}
        >
          Warning
        </Button>
        <Button
          onClick={() => {
            setState({
              snack: {
                id: guid(),
                message: 'Info Clicked!',
                type: 'info',
              },
            })
          }}
        >
          Info
        </Button>
      </div>
      <Snackbar
        snack={state.snack}
        onDismiss={snackId => {
          setState({ snack: null })
        }}
      />
    </div>
  )}
</State>