diff --git a/components/index.js b/components/index.js
index 503abd3a..72c6f283 100644
--- a/components/index.js
+++ b/components/index.js
@@ -27,6 +27,7 @@ import RadioGroup from './radio/radio_group';
import RadioButton from './radio/radio_button';
import Ripple from './ripple';
import Slider from './slider';
+import Snackbar from './snackbar';
import Switch from './switch';
import Tab from './tabs/tab';
import Tabs from './tabs/tabs';
@@ -36,4 +37,4 @@ export default { App, AppBar, Autocomplete, Button, Card, Checkbox, DatePicker,
Dialog, Drawer, Dropdown, FontIcon, Form, Input, Link, List, ListItem,
ListDivider, ListCheckbox, ListSubHeader, Menu, MenuItem, MenuDivider,
IconMenu, Navigation, ProgressBar, RadioGroup, RadioButton, Ripple, Slider,
- Switch, Tab, Tabs, TimePicker };
+ Snackbar, Switch, Tab, Tabs, TimePicker };
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index db0c1038..5a503ffb 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -6,8 +6,9 @@ import FontIcon from '../font_icon';
class Snackbar extends React.Component {
static propTypes = {
action: React.PropTypes.string,
+ className: React.PropTypes.string,
icon: React.PropTypes.string,
- label: React.PropTypes.string,
+ label: React.PropTypes.string.isRequired,
onClick: React.PropTypes.func,
timeout: React.PropTypes.number,
type: React.PropTypes.string
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index fe2aa582..7c4ec32e 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -1,2 +1,54 @@
-# 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.
+
+
+```jsx
+import { Button, Snackbar } from 'react-toolbox';
+
+class SnackbarTest extends React.Component {
+ handleClick = () => {
+ this.refs.snackbar.show();
+ };
+
+ handleSnackbarClick = () => {
+ this.refs.snackbar.hide();
+ };
+
+ render () {
+ return (
+
+ );
+ }
+}
+```
+
+## 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.
+
diff --git a/components/snackbar/style.scss b/components/snackbar/style.scss
index 823c1ada..50fb8911 100644
--- a/components/snackbar/style.scss
+++ b/components/snackbar/style.scss
@@ -44,8 +44,9 @@
.button {
min-width: inherit;
- height: inherit;
- padding: 0;
+ margin-top: - $snackbar-vertical-offset / 2;
+ margin-bottom: - $snackbar-vertical-offset / 2;
+ margin-right: - $snackbar-horizontal-offset / 2;
margin-left: $snackbar-button-offset;
color: white;
> abbr {
diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index 22c0eebc..020b0ca8 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -40,6 +40,7 @@ import NavigationExample1 from './examples/navigation_example_1.txt';
import ProgressBarExample1 from './examples/progressbar_example_1.txt';
import RadioExample1 from './examples/radio_example_1.txt';
import SliderExample1 from './examples/slider_example_1.txt';
+import SnackbarExample1 from './examples/snackbar_example_1.txt';
import TimePickerTest from './examples/timepicker_example_1.txt';
export default {
@@ -153,7 +154,8 @@ export default {
snackbar: {
name: 'Snackbar',
docs: Snackbar,
- path: '/components/snackbar'
+ path: '/components/snackbar',
+ examples: [SnackbarExample1]
},
switch: {
name: 'Switch',
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
new file mode 100644
index 00000000..e3751ec3
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -0,0 +1,27 @@
+class SnackbarTest extends React.Component {
+ handleClick = () => {
+ this.refs.snackbar.show();
+ };
+
+ handleSnackbarClick = () => {
+ this.refs.snackbar.hide();
+ };
+
+ render () {
+ return (
+
+ );
+ }
+}
+
+return ;