Standard snackbar:
```js
initialState = {
	visible: false
};
<div>
	<BrandButton onClick={() => setState({ visible: !state.visible})}>{state.visible ? 'Hide' : 'Show'}</BrandButton>
	<Snackbar
		visible={state.visible}
		displayTime="short"
		onClose={() => setState({ visible: false})}
	>
		Bacon ipsum dolor amet cow salami spare ribs biltong, ribeye tail filet mignon. Prosciutto kielbasa filet mignon shoulder picanha spare ribs turkey pork loin pig beef, capicola chicken cow shankle. Short ribs cow picanha andouille pancetta kielbasa
	</Snackbar>
</div>
```

Persistent snackbar (has dismiss button):
   ```js
   initialState = {
   	visible: false
   };
   <div>
   	<BrandButton onClick={() => setState({ visible: !state.visible})}>{state.visible ? 'Hide' : 'Show'}</BrandButton>
   	<Snackbar
   		type="error"
   		visible={state.visible}
   		displayTime="persistent"
   		onClose={() => setState({ visible: false})}
   	>
   		It failed badly
   	</Snackbar>
   </div>
   ```

Snackbar with action button:
```js
initialState = {
	visible: false
};
<div>
	<BrandButton onClick={() => setState({ visible: !state.visible})}>{state.visible ? 'Hide' : 'Show'}</BrandButton>
	<Snackbar
		type="information"
		visible={state.visible}
		displayTime="persistent"
		onClose={() => setState({ visible: false})}
		action="Accept"
		onAction={() => alert('Thanks!')}
	>
		Do you agree?
	</Snackbar>
</div>
```

Snackbar with long message (buttons wrap):
```js
initialState = {
	visible: false
};
<div>
	<BrandButton onClick={() => setState({ visible: !state.visible})}>{state.visible ? 'Hide' : 'Show'}</BrandButton>
	<Snackbar
		type="information"
		visible={state.visible}
		displayTime="persistent"
		onClose={() => setState({ visible: false})}
		action="Accept"
		onAction={() => alert('Thanks!')}
	>
		Bacon ipsum dolor amet cow salami spare ribs biltong, ribeye tail filet mignon. Prosciutto kielbasa filet mignon shoulder picanha spare ribs turkey pork loin pig beef, capicola chicken cow shankle. Short ribs cow picanha andouille pancetta kielbasa
	</Snackbar>
</div>
```

Snackbar with success colours:
```js
initialState = {
	visible: false
};
<div>
	<BrandButton onClick={() => setState({ visible: !state.visible})}>{state.visible ? 'Hide' : 'Show'}</BrandButton>
	<Snackbar
		type="success"
		visible={state.visible}
		displayTime="short"
		onClose={() => setState({ visible: false})}
	>
		Changes saved
	</Snackbar>
</div>
```

Snackbar with error colours:
```js
initialState = {
	visible: false
};
<div>
	<BrandButton onClick={() => setState({ visible: !state.visible})}>{state.visible ? 'Hide' : 'Show'}</BrandButton>
	<Snackbar
		type="error"
		visible={state.visible}
		displayTime="persistent"
		onClose={() => setState({ visible: false})}
	>
		Something went a bit Pete Tong
	</Snackbar>
</div>
```