react-toolbox/components/snackbar

Snackbar

Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.

import { Button, Snackbar } from 'react-toolbox';

class SnackbarTest extends React.Component {
  handleClick = () => {
    this.refs.snackbar.show();
  };

  handleSnackbarClick = () => {
    this.refs.snackbar.hide();
  };

  render () {
    return (
      <section>
        <Button label='Show Snackbar' raised onClick={this.handleClick} />
        <Snackbar
          action='Nice'
          icon='question_answer'
          label='A new developer started using React Toolbox'
          onClick={this.handleSnackbarClick}
          ref='snackbar'
          type='accept'
      />
      </section>
    );
  }
}

Properties

Name	Type	Default	Description
action	String		Label for the action component inside the Snackbar.
active	Boolean	false	If true, the snackbar will be active.
className	String	''	Additional class name to provide custom styling.
icon	String or Element		String key for an icon or Element which will be displayed in left side of the snackbar.
label	String		Text to display in the content. Required.
onClick	Function		Callback function that will be called when the button action is clicked.
onTimeout	Function		Callback function when finish the set timeout.
timeout	Number		Amount of time in milliseconds after the Snackbar will be automatically hidden.
type	String		Indicates the action type. Can be accept, warning or cancel