Add cancel and nude variants to Button

client/components/basic/Button.js

@@ -6,6 +6,8 @@ export const Button = ({
 	invisible,
 	primary,
 	secondary,
+	cancel,
+	nude,
 	submit,
 	...props
 }) => <button
@@ -15,6 +17,8 @@ export const Button = ({
 		primary && 'rc-button--primary',
 		secondary && 'rc-button--secondary',
 		invisible && 'rc-button--invisible',
+		cancel && 'rc-button--cancel',
+		nude && 'rc-button--nude',
 		className,
 	].filter(Boolean).join(' ')}
 	{...props}

client/components/basic/Button.stories.js

@@ -1,3 +1,5 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Button } from './Button';
@@ -7,10 +9,25 @@ export default {
 	component: Button,
 };
 
-export const _default = () => <Button>Button</Button>;
+export const _default = () => <Button
+	children={text('children', 'Button')}
+	invisible={boolean('invisible')}
+	primary={boolean('primary')}
+	secondary={boolean('secondary')}
+	cancel={boolean('cancel')}
+	nude={boolean('nude')}
+	submit={boolean('submit')}
+	onClick={action('click')}
+/>;
 
 export const invisible = () => <Button invisible>Button</Button>;
 
 export const primary = () => <Button primary>Button</Button>;
 
 export const secondary = () => <Button secondary>Button</Button>;
+
+export const cancel = () => <Button cancel>Button</Button>;
+
+export const nude = () => <Button nude>Button</Button>;
+
+export const submit = () => <Button submit>Button</Button>;