1.8 KiB
1.8 KiB
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' kind='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. | |
className |
String |
'' |
Additional class name to provide custom styling. |
icon |
String |
String key for an icon displayed in left side of the snackbar. | |
label |
String |
Text to display in the content. | |
onClick |
Function |
Callback function that will be called when the button action is clicked. | |
timeout |
Number |
Amount of time after the Snackbar will be automatically hidden. | |
type |
String |
Indicates the action type. Can be accept , warning or cancel |
Methods
The Snackbar, in a similar way to the Dialog and Drawer holds state to check whether it's being displayed or not. It exposes methods to hide and show it manually:
hide
used to hide the Snackbar.show
used to show the Snackbar.