diff --git a/.eslintrc b/.eslintrc
index 7abf4a5a..af1830c7 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -16,7 +16,7 @@
   "rules": {
     "semi": ["error", "always"],
     "quotes": ["error", "single"],
-    "no-console": 0,
+    "no-console": 2,
     "no-param-reassign": 0,
     "react/jsx-filename-extension": 0,
     "import/no-extraneous-dependencies": 0,
diff --git a/src/components/box/box.js b/src/components/box/box.js
index ed773180..c9188300 100644
--- a/src/components/box/box.js
+++ b/src/components/box/box.js
@@ -23,13 +23,13 @@ export default class Box extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('box', className)}
       >
         {children}
diff --git a/src/components/breadcrumb/__test__/breadcrumb.test.js b/src/components/breadcrumb/__test__/breadcrumb.test.js
index 98fd867e..5726a6cb 100644
--- a/src/components/breadcrumb/__test__/breadcrumb.test.js
+++ b/src/components/breadcrumb/__test__/breadcrumb.test.js
@@ -11,9 +11,11 @@ const Anchor = ({
 
 describe('Breadcrumb component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.warn = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
   it('Should be a Breadcrumb', () => {
diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
index 9bc6ce45..4ec512a2 100644
--- a/src/components/breadcrumb/breadcrumb.js
+++ b/src/components/breadcrumb/breadcrumb.js
@@ -35,21 +35,22 @@ export default class Breadcrumb extends PureComponent {
   render() {
     const {
       className,
-      style,
       items,
       renderAs,
       hrefAttr,
       separator,
       size,
       align,
+      ...props
     } = this.props;
     if (renderAs !== 'a' && !hrefAttr) {
+      // eslint-disable-next-line no-console
       console.warn('if renderAs is different the anchor (a), hrefAttr is required. Check Breadcrumb props');
     }
     const Element = renderAs;
     return (
       <nav
-        style={style}
+        {...props}
         className={classnames('breadcrumb', className, {
           [`has-${separator}-separator`]: separator,
           [`is-${size}`]: size,
@@ -59,7 +60,7 @@ export default class Breadcrumb extends PureComponent {
         <ul>
           {
             items.map((item) => {
-              const props = {
+              const p = {
                 [renderAs === 'a' ? 'href' : hrefAttr]: item.url,
               };
               return (
@@ -69,7 +70,7 @@ export default class Breadcrumb extends PureComponent {
                     'is-active': item.active,
                   })}
                 >
-                  <Element {...props}>
+                  <Element {...p}>
                     {item.name}
                   </Element>
                 </li>
diff --git a/src/components/button/__test__/button.test.js b/src/components/button/__test__/button.test.js
index 25b5777d..9a8d4ce4 100644
--- a/src/components/button/__test__/button.test.js
+++ b/src/components/button/__test__/button.test.js
@@ -45,12 +45,15 @@ describe('Button component', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should throw a console.error if no hrefAttr is defined when renderAs different as A and href attr is defined', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     renderer.create(
       <Button renderAs={Link} href="http://google.com" color="danger" >
         TEST
       </Button>);
+    // eslint-disable-next-line no-console
     expect(console.error).toHaveBeenCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
   it('Should render be disabled', () => {
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 7f965fb5..c7644e99 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -59,9 +59,7 @@ export default class Button extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
-      onClick,
       color,
       size,
       outlined,
@@ -84,6 +82,7 @@ export default class Button extends PureComponent {
     if (href) {
       otherProps[renderAs === 'a' ? 'href' : hrefAttr] = href;
       if (renderAs !== 'a' && !hrefAttr) {
+        // eslint-disable-next-line no-console
         console.error('warning: if renderAs is different the anchor (a), hrefAttr is required. Check Button props');
       }
     }
@@ -100,9 +99,7 @@ export default class Button extends PureComponent {
       <Element
         {...props}
         {...otherProps}
-        style={style}
         disabled={disabled}
-        onClick={onClick}
         className={classnames(className, {
           'is-link': link,
           [`is-${color}`]: color,
diff --git a/src/components/card/card.js b/src/components/card/card.js
index 260489c3..8d19c837 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -25,18 +25,16 @@ export default class Card extends PureComponent {
     const {
       className,
       children,
-      style,
       type,
       renderAs,
       ...props
     } = this.props;
     if (type === 'image') {
-      return <CardImage {...props} style={style} className={className} />;
+      return <CardImage {...props} className={className} />;
     }
     const Element = renderAs;
     return (
       <Element
-        style={style}
         className={classnames(className, {
           [`card-${type}`]: type,
           card: !type,
diff --git a/src/components/columns/__test__/columns.test.js b/src/components/columns/__test__/columns.test.js
index af350591..70feb8d8 100644
--- a/src/components/columns/__test__/columns.test.js
+++ b/src/components/columns/__test__/columns.test.js
@@ -4,9 +4,11 @@ import Columns from '..';
 
 describe('Columns component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.warn = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
   it('Should have columns classname', () => {
diff --git a/src/components/columns/columns.js b/src/components/columns/columns.js
index 89eb9e62..d64c4e54 100644
--- a/src/components/columns/columns.js
+++ b/src/components/columns/columns.js
@@ -47,21 +47,21 @@ export default class Columns extends PureComponent {
     const {
       children,
       className,
-      style,
       breakpoint,
       gapless,
       multiline,
       centered,
+      ...props
     } = this.props;
     return (
       <div
+        {...props}
         className={classNames(className, 'columns', {
         [`is-${breakpoint}`]: breakpoint,
         'is-gapless': gapless,
         'is-multiline': multiline,
         'is-centered': centered,
       })}
-        style={style}
       >
         {children}
       </div>
diff --git a/src/components/columns/components/column.js b/src/components/columns/components/column.js
index d9a1c716..1b03144e 100644
--- a/src/components/columns/components/column.js
+++ b/src/components/columns/components/column.js
@@ -154,7 +154,6 @@ export default class Column extends PureComponent {
     const {
       children,
       className,
-      style,
       size,
       offset,
       narrow,
@@ -163,7 +162,6 @@ export default class Column extends PureComponent {
       desktop,
       widescreen,
       fullhd,
-
       mobileSize,
       tabletSize,
       desktopSize,
@@ -174,14 +172,17 @@ export default class Column extends PureComponent {
       desktopOffset,
       widescreenOffset,
       fullhdOffset,
+      ...props
     } = this.props;
 
     if (mobileSize || tabletSize || desktopSize || widescreenSize || fullhdSize || mobileOffset || tabletOffset || desktopOffset || widescreenOffset || fullhdOffset) {
+      // eslint-disable-next-line no-console
       console.warn('DEPRECATION Warning: The props: mobileSize tabletSize desktopSize widescreenSize fullhdSize mobileOffset tabletOffset desktopOffset widescreenOffset fullhdOffset are deprecated, please use the mobile.size... alternatives');
     }
 
     return (
       <div
+        {...props}
         className={classNames(className, 'column', {
         [`is-${size}`]: size,
         [`is-${mobile.size || mobileSize}-mobile`]: mobile.size || mobileSize,
@@ -202,7 +203,6 @@ export default class Column extends PureComponent {
         'is-narrow-widescreen': widescreen.narrow,
         'is-narrow-fullhd': fullhd.narrow,
       })}
-        style={style}
       >
         {children}
       </div>
diff --git a/src/components/container/container.js b/src/components/container/container.js
index 9c428c24..e0543736 100644
--- a/src/components/container/container.js
+++ b/src/components/container/container.js
@@ -30,13 +30,13 @@ export default class Container extends PureComponent {
       fluid,
       breakpoint,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('container', className, {
           'is-fluid': fluid,
           [`is-${breakpoint}`]: breakpoint,
diff --git a/src/components/content/content.js b/src/components/content/content.js
index 9f308891..e1adf8be 100644
--- a/src/components/content/content.js
+++ b/src/components/content/content.js
@@ -23,14 +23,14 @@ export default class Content extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       size,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('content', className, {
           [`is-${size}`]: size,
         })}
diff --git a/src/components/dropdown/__test__/dropdown.test.js b/src/components/dropdown/__test__/dropdown.test.js
index 3efa5bd3..2beb91db 100644
--- a/src/components/dropdown/__test__/dropdown.test.js
+++ b/src/components/dropdown/__test__/dropdown.test.js
@@ -62,6 +62,7 @@ describe('Dropdown component', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should print error if value is passed but no onChange Handler', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     renderer.create(
       <Dropdown value="value" style={{ width: 400 }}>
@@ -70,6 +71,7 @@ describe('Dropdown component', () => {
         </Dropdown.Item>
       </Dropdown>);
     expect(global.console.error).toBeCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
   it('Should have divider', () => {
@@ -154,6 +156,7 @@ describe('Dropdown component', () => {
     expect(component.state('open')).toBe(false);
   });
   it('Should change display error message if props change has value but no onChange Handler', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     const component = shallow(
       <Dropdown value="value" style={{ width: 400 }} onChange={() => {}}>
@@ -166,6 +169,7 @@ describe('Dropdown component', () => {
     expect(global.console.error).not.toBeCalled();
     component.setProps({ value: 'other', onChange: null });
     expect(global.console.error).toBeCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
 });
diff --git a/src/components/dropdown/components/divider.js b/src/components/dropdown/components/divider.js
index 2112b06b..44915feb 100644
--- a/src/components/dropdown/components/divider.js
+++ b/src/components/dropdown/components/divider.js
@@ -14,10 +14,10 @@ export default class DropdownDivider extends PureComponent {
   }
 
   render() {
-    const { style, className } = this.props;
+    const { className, ...props } = this.props;
     return (
       <hr
-        style={style}
+        {...props}
         className={classnames('dropdown-divider', className)}
       />
     );
diff --git a/src/components/dropdown/components/item.js b/src/components/dropdown/components/item.js
index 1c7875fe..e63a76f6 100644
--- a/src/components/dropdown/components/item.js
+++ b/src/components/dropdown/components/item.js
@@ -12,16 +12,16 @@ export default class DropdownItem extends PureComponent {
 
   static defaultProps = {
     active: false,
-    onClick: null,
+    onClick: undefined,
     children: null,
   }
 
   render() {
-    const { active, children, value, onClick } = this.props;
+    const { active, children, value, ...props } = this.props;
     return (
       <div
         title={value}
-        onClick={onClick}
+        {...props}
         role="presentation"
         className={classnames('dropdown-item', {
           'is-active': active,
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
index 0e352b1e..eb1e3736 100644
--- a/src/components/dropdown/dropdown.js
+++ b/src/components/dropdown/dropdown.js
@@ -59,13 +59,13 @@ export default class Dropdown extends PureComponent {
 
   checkProps = (props) => {
     if (props.value && !props.onChange) {
+      // eslint-disable-next-line no-console
       console.error('Warning: This is a controlled component without onChange listener, please check the props of the Dropdown component');
     }
   }
 
   close = (evt) => {
     // IDK yet how to test using the ref in enzime
-    /* istanbul ignore next */
     if (this.props.hoverable || (evt && evt.path.find(node => node === this.htmlElement))) {
       return;
     }
@@ -91,13 +91,14 @@ export default class Dropdown extends PureComponent {
 
   render() {
     const {
-      style,
       className,
       children,
       value,
       color,
       align,
       hoverable,
+      onChange,
+      ...props
     } = this.props;
     let current = null;
 
@@ -113,8 +114,8 @@ export default class Dropdown extends PureComponent {
 
     return (
       <div
+        {...props}
         ref={(node) => { this.htmlElement = node; }}
-        style={style}
         className={classnames('dropdown', className, {
           'is-active': this.state.open,
           [`is-${align}`]: align,
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
index a5bb5b87..ae36a6a8 100644
--- a/src/components/footer/footer.js
+++ b/src/components/footer/footer.js
@@ -21,13 +21,13 @@ export default class Footer extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('footer', className)}
       >
         {children}
diff --git a/src/components/form/components/__test__/__snapshots__/checkbox.test.js.snap b/src/components/form/components/__test__/__snapshots__/checkbox.test.js.snap
index de44092b..544192fb 100644
--- a/src/components/form/components/__test__/__snapshots__/checkbox.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/checkbox.test.js.snap
@@ -11,10 +11,6 @@ exports[`Checkbox component Should have checkbox classname 1`] = `
   <input
     disabled={false}
     name={null}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     type="checkbox"
     value=""
   />
diff --git a/src/components/form/components/__test__/__snapshots__/input.test.js.snap b/src/components/form/components/__test__/__snapshots__/input.test.js.snap
index e5faf180..60e48785 100644
--- a/src/components/form/components/__test__/__snapshots__/input.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/input.test.js.snap
@@ -5,10 +5,6 @@ exports[`Input component Should be disabled with placeholder and value 1`] = `
   className="input"
   disabled={true}
   name={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder="hello tests"
   readOnly={false}
   style={Object {}}
@@ -22,10 +18,6 @@ exports[`Input component Should be large and readOnly 1`] = `
   className="input is-large"
   disabled={false}
   name={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={true}
   style={Object {}}
@@ -39,10 +31,6 @@ exports[`Input component Should be type email and a with success colors 1`] = `
   className="input is-success"
   disabled={false}
   name={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={false}
   style={Object {}}
@@ -56,10 +44,6 @@ exports[`Input component Should concat classname in props with Bulma classname 1
   className="input other-class this-is-a-test"
   disabled={false}
   name={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={false}
   style={Object {}}
@@ -75,10 +59,6 @@ exports[`Input component Should have input classname 1`] = `
   className="input"
   disabled={false}
   name={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={false}
   style={Object {}}
@@ -92,10 +72,6 @@ exports[`Input component Should use inline styles 1`] = `
   className="input"
   disabled={false}
   name={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={false}
   style={
diff --git a/src/components/form/components/__test__/__snapshots__/radio.test.js.snap b/src/components/form/components/__test__/__snapshots__/radio.test.js.snap
index 5de81331..d926ad79 100644
--- a/src/components/form/components/__test__/__snapshots__/radio.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/radio.test.js.snap
@@ -10,10 +10,6 @@ exports[`Radio component Should be disabled, checked and with value 1`] = `
     checked={true}
     disabled={true}
     name="test"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     type="radio"
     value="TEST"
   />
@@ -33,10 +29,6 @@ exports[`Radio component Should concat classname in props with Bulma classname 1
     checked={false}
     disabled={false}
     name="test"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     type="radio"
     value=""
   />
@@ -58,10 +50,6 @@ exports[`Radio component Should have radio classname 1`] = `
     checked={false}
     disabled={false}
     name="test"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     type="radio"
     value=""
   />
@@ -82,10 +70,6 @@ exports[`Radio component Should show a error on the console because name props i
     checked={true}
     disabled={true}
     name={undefined}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     type="radio"
     value="TEST"
   />
@@ -109,10 +93,6 @@ exports[`Radio component Should use inline styles 1`] = `
     checked={false}
     disabled={false}
     name="test"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     type="radio"
     value=""
   />
diff --git a/src/components/form/components/__test__/__snapshots__/select.test.js.snap b/src/components/form/components/__test__/__snapshots__/select.test.js.snap
index d33baa5f..0b2ee07e 100644
--- a/src/components/form/components/__test__/__snapshots__/select.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/select.test.js.snap
@@ -9,10 +9,6 @@ exports[`Select component Should be large, red, disabled and multioption 1`] = `
     disabled={true}
     multiple={true}
     name={null}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     readOnly={false}
     value=""
   >
@@ -38,10 +34,6 @@ exports[`Select component Should concat classname in props with Bulma classname
     disabled={false}
     multiple={false}
     name={null}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     readOnly={false}
     value=""
   >
@@ -69,10 +61,6 @@ exports[`Select component Should have select classname 1`] = `
     disabled={false}
     multiple={false}
     name={null}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     readOnly={false}
     value=""
   >
@@ -102,10 +90,6 @@ exports[`Select component Should use inline styles 1`] = `
     disabled={false}
     multiple={false}
     name={null}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     readOnly={false}
     value=""
   >
diff --git a/src/components/form/components/__test__/__snapshots__/textarea.test.js.snap b/src/components/form/components/__test__/__snapshots__/textarea.test.js.snap
index 932ca428..6592e353 100644
--- a/src/components/form/components/__test__/__snapshots__/textarea.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/textarea.test.js.snap
@@ -5,10 +5,6 @@ exports[`Textarea component Should be disabled with placeholder and value 1`] =
   className="textarea"
   disabled={true}
   name=""
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder="hello tests"
   readOnly={false}
   rows={4}
@@ -22,10 +18,6 @@ exports[`Textarea component Should be large with 10 rows and readOnly 1`] = `
   className="textarea is-large"
   disabled={false}
   name=""
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={true}
   rows={10}
@@ -39,10 +31,6 @@ exports[`Textarea component Should concat classname in props with Bulma classnam
   className="textarea other-class this-is-a-test"
   disabled={false}
   name=""
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={false}
   rows={4}
@@ -58,10 +46,6 @@ exports[`Textarea component Should have textarea classname 1`] = `
   className="textarea"
   disabled={false}
   name=""
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={false}
   rows={4}
@@ -75,10 +59,6 @@ exports[`Textarea component Should use inline styles 1`] = `
   className="textarea"
   disabled={false}
   name=""
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
   placeholder=""
   readOnly={false}
   rows={4}
diff --git a/src/components/form/components/__test__/input.test.js b/src/components/form/components/__test__/input.test.js
index 6a9d8c70..847c4b99 100644
--- a/src/components/form/components/__test__/input.test.js
+++ b/src/components/form/components/__test__/input.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
 import Input from '../input';
 
 describe('Input component', () => {
@@ -31,23 +30,4 @@ describe('Input component', () => {
     const component = renderer.create(<Input value="TEST" disabled placeholder="hello tests" />);
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it('Should use default event methods', () => {
-    const onClick = jest.spyOn(Input.defaultProps, 'onClick');
-    const onChange = jest.spyOn(Input.defaultProps, 'onChange');
-    const onFocus = jest.spyOn(Input.defaultProps, 'onFocus');
-    const onBlur = jest.spyOn(Input.defaultProps, 'onBlur');
-    const component = shallow(<Input value="TEST" disabled placeholder="hello tests" />);
-
-    component.simulate('change');
-    component.simulate('change');
-    component.simulate('focus');
-    component.simulate('blur');
-    component.simulate('click');
-    component.simulate('focus');
-
-    expect(onFocus).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onBlur).toHaveBeenCalledTimes(1);
-  });
 });
diff --git a/src/components/form/components/__test__/radio.test.js b/src/components/form/components/__test__/radio.test.js
index 56dc265a..0f0c6328 100644
--- a/src/components/form/components/__test__/radio.test.js
+++ b/src/components/form/components/__test__/radio.test.js
@@ -4,9 +4,11 @@ import Radio from '../radio';
 
 describe('Radio component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
   it('Should exist', () => {
diff --git a/src/components/form/components/checkbox.js b/src/components/form/components/checkbox.js
index 421e22b6..d66da303 100644
--- a/src/components/form/components/checkbox.js
+++ b/src/components/form/components/checkbox.js
@@ -2,9 +2,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import events from '../../../modifiers/events';
-
-
 export default class Checkbox extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
@@ -17,7 +14,6 @@ export default class Checkbox extends PureComponent {
      * The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
      */
     name: PropTypes.string,
-    ...events.propTypes,
   }
 
   static defaultProps = {
@@ -28,7 +24,6 @@ export default class Checkbox extends PureComponent {
     disabled: false,
     checked: false,
     name: null,
-    ...events.defaultProps,
   }
 
   render() {
@@ -49,7 +44,7 @@ export default class Checkbox extends PureComponent {
         style={style}
       >
         <input
-          {...events.props(props)}
+          {...props}
           name={name}
           type="checkbox"
           value={value}
diff --git a/src/components/form/components/control.js b/src/components/form/components/control.js
index e5c0ec96..5431b1e5 100644
--- a/src/components/form/components/control.js
+++ b/src/components/form/components/control.js
@@ -32,19 +32,19 @@ export default class Control extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       fullwidth,
       iconLeft,
       iconRight,
       loading,
       size,
+      ...props
     } = this.props;
     const Element = renderAs;
 
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('control', className, {
           'is-expanded': fullwidth,
           'has-icons-left': iconLeft,
diff --git a/src/components/form/components/field/field-body.js b/src/components/form/components/field/field-body.js
index 6b462498..230be7c6 100644
--- a/src/components/form/components/field/field-body.js
+++ b/src/components/form/components/field/field-body.js
@@ -21,14 +21,14 @@ export default class FieldBody extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
 
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('field-body', className, {
         })}
       >
diff --git a/src/components/form/components/field/field-label.js b/src/components/form/components/field/field-label.js
index 0699fa5a..8fee0505 100644
--- a/src/components/form/components/field/field-label.js
+++ b/src/components/form/components/field/field-label.js
@@ -24,15 +24,15 @@ export default class FieldLabel extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       size,
+      ...props
     } = this.props;
     const Element = renderAs;
 
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('field-label', className, {
           [`is-${size}`]: size,
         })}
diff --git a/src/components/form/components/field/field.js b/src/components/form/components/field/field.js
index e26a954a..a9e902a7 100644
--- a/src/components/form/components/field/field.js
+++ b/src/components/form/components/field/field.js
@@ -34,36 +34,33 @@ export default class Field extends PureComponent {
 
   render() {
     const {
-      children,
       className,
-      style,
       renderAs,
       align,
       multiline,
       horizontal,
+      kind,
       ...props
     } = this.props;
     const Element = renderAs;
-    let kind = null;
+    let k = null;
 
-    if (props.kind === 'addons') {
-      kind = 'has-addons';
-    } else if (props.kind === 'group') {
-      kind = 'is-grouped';
+    if (kind === 'addons') {
+      k = 'has-addons';
+    } else if (kind === 'group') {
+      k = 'is-grouped';
     }
 
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('field', className, {
-          [`${kind}`]: kind,
-          [`${kind}-${align}`]: kind && align,
-          [`${kind}-multiline`]: kind === 'is-grouped' && multiline,
+          [`${k}`]: k,
+          [`${k}-${align}`]: k && align,
+          [`${k}-multiline`]: k === 'is-grouped' && multiline,
           'is-horizontal': horizontal,
         })}
-      >
-        {children}
-      </Element>
+      />
     );
   }
 }
diff --git a/src/components/form/components/help.js b/src/components/form/components/help.js
index c0863f0e..990a2dd3 100644
--- a/src/components/form/components/help.js
+++ b/src/components/form/components/help.js
@@ -25,13 +25,13 @@ export default class Help extends PureComponent {
   render() {
     const {
       className,
-      style,
       children,
       color,
+      ...props
     } = this.props;
     return (
       <p
-        style={style}
+        {...props}
         className={classnames('help', className, {
           [`is-${color}`]: color,
         })}
diff --git a/src/components/form/components/input.js b/src/components/form/components/input.js
index 98ad7e51..d5578ae0 100644
--- a/src/components/form/components/input.js
+++ b/src/components/form/components/input.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import CONSTANTS from '../../../constants';
-import events from '../../../modifiers/events';
 
 const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
 
@@ -23,7 +22,6 @@ export default class Input extends PureComponent {
      * The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
      */
     name: PropTypes.string,
-    ...events.propTypes,
   }
 
   static defaultProps = {
@@ -38,13 +36,11 @@ export default class Input extends PureComponent {
     disabled: false,
     placeholder: '',
     name: null,
-    ...events.defaultProps,
   }
 
   render() {
     const {
       className,
-      style,
       type,
       size,
       color,
@@ -58,10 +54,9 @@ export default class Input extends PureComponent {
     } = this.props;
     return (
       <input
-        {...events.props(props)}
+        {...props}
         name={name}
         value={value}
-        style={style}
         type={type}
         placeholder={placeholder}
         readOnly={readOnly || isStatic}
diff --git a/src/components/form/components/label.js b/src/components/form/components/label.js
index 2d515480..99eb68c8 100644
--- a/src/components/form/components/label.js
+++ b/src/components/form/components/label.js
@@ -23,15 +23,13 @@ export default class Label extends PureComponent {
     const {
       children,
       className,
-      style,
       size,
-      htmlFor,
+      ...props
     } = this.props;
 
     return (
       <label
-        htmlFor={htmlFor}
-        style={style}
+        {...props}
         className={classnames('label', className, {
           [`is-${size}`]: size,
         })}
diff --git a/src/components/form/components/radio.js b/src/components/form/components/radio.js
index 157095dd..a560c6ad 100644
--- a/src/components/form/components/radio.js
+++ b/src/components/form/components/radio.js
@@ -2,8 +2,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import events from '../../../modifiers/events';
-
 export default class Radio extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
@@ -15,7 +13,7 @@ export default class Radio extends PureComponent {
     style: PropTypes.shape({}),
     disabled: PropTypes.bool,
     checked: PropTypes.bool,
-    ...events.propTypes,
+    value: PropTypes.string,
   }
 
   static defaultProps = {
@@ -25,7 +23,6 @@ export default class Radio extends PureComponent {
     style: {},
     disabled: false,
     checked: false,
-    ...events.defaultProps,
   }
 
   render() {
@@ -46,7 +43,7 @@ export default class Radio extends PureComponent {
         style={style}
       >
         <input
-          {...events.props(props)}
+          {...props}
           name={name}
           checked={checked}
           type="radio"
diff --git a/src/components/form/components/select.js b/src/components/form/components/select.js
index 95e41eda..1119509e 100644
--- a/src/components/form/components/select.js
+++ b/src/components/form/components/select.js
@@ -4,7 +4,6 @@ import classnames from 'classnames';
 
 
 import CONSTANTS from '../../../constants';
-import events from '../../../modifiers/events';
 
 const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
 
@@ -23,7 +22,6 @@ export default class Select extends PureComponent {
      * The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
      */
     name: PropTypes.string,
-    ...events.propTypes,
   }
 
   static defaultProps = {
@@ -37,7 +35,6 @@ export default class Select extends PureComponent {
     disabled: false,
     multiple: false,
     name: null,
-    ...events.defaultProps,
   }
 
   render() {
@@ -64,7 +61,7 @@ export default class Select extends PureComponent {
         style={style}
       >
         <select
-          {...events.props(props)}
+          {...props}
           multiple={multiple}
           value={value}
           readOnly={readOnly}
diff --git a/src/components/form/components/textarea.js b/src/components/form/components/textarea.js
index e546de14..ab2e8921 100644
--- a/src/components/form/components/textarea.js
+++ b/src/components/form/components/textarea.js
@@ -4,7 +4,6 @@ import classnames from 'classnames';
 
 
 import CONSTANTS from '../../../constants';
-import events from '../../../modifiers/events';
 
 const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
 
@@ -23,7 +22,6 @@ export default class Textarea extends PureComponent {
      * The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
      */
     name: PropTypes.string,
-    ...events.propTypes,
   }
 
   static defaultProps = {
@@ -37,13 +35,11 @@ export default class Textarea extends PureComponent {
     rows: 4,
     value: '',
     name: '',
-    ...events.defaultProps,
   }
 
   render() {
     const {
       className,
-      style,
       size,
       color,
       readOnly,
@@ -57,10 +53,9 @@ export default class Textarea extends PureComponent {
     return (
       <textarea
         name={name}
-        {...events.props(props)}
+        {...props}
         value={value}
         rows={rows}
-        style={style}
         placeholder={placeholder}
         readOnly={readOnly}
         disabled={disabled}
diff --git a/src/components/heading/heading.js b/src/components/heading/heading.js
index a75961e4..892e48ea 100644
--- a/src/components/heading/heading.js
+++ b/src/components/heading/heading.js
@@ -29,18 +29,18 @@ export default class Heading extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       size,
       subtitle,
       spaced,
       heading,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(className, {
           title: !subtitle && !heading,
           subtitle: !heading,
diff --git a/src/components/hero/components/hero-body.js b/src/components/hero/components/hero-body.js
index c5594607..0cfb3bbe 100644
--- a/src/components/hero/components/hero-body.js
+++ b/src/components/hero/components/hero-body.js
@@ -21,13 +21,13 @@ export default class HeroBody extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(className, 'hero-body')}
       >
         {children}
diff --git a/src/components/hero/components/hero-footer.js b/src/components/hero/components/hero-footer.js
index 22aeeb7f..96d3b147 100644
--- a/src/components/hero/components/hero-footer.js
+++ b/src/components/hero/components/hero-footer.js
@@ -21,13 +21,13 @@ export default class HeroFooter extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(className, 'hero-foot')}
       >
         {children}
diff --git a/src/components/hero/components/hero-head.js b/src/components/hero/components/hero-head.js
index ceb48c0b..79ffae74 100644
--- a/src/components/hero/components/hero-head.js
+++ b/src/components/hero/components/hero-head.js
@@ -21,14 +21,14 @@ export default class HeroHead extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(className, 'hero-head')}
       >
         {children}
diff --git a/src/components/hero/hero.js b/src/components/hero/hero.js
index 07b01aa8..bcaa8fbe 100644
--- a/src/components/hero/hero.js
+++ b/src/components/hero/hero.js
@@ -38,17 +38,17 @@ export default class Hero extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       color,
       gradient,
       size,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('hero', className, {
           [`is-${color}`]: color,
           [`is-${size}`]: size,
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
index 48724634..e8a2b749 100644
--- a/src/components/icon/icon.js
+++ b/src/components/icon/icon.js
@@ -33,14 +33,14 @@ export default class Icon extends PureComponent {
       size,
       color,
       className,
-      style,
       align,
       children,
+      ...props
     } = this.props;
 
     return (
       <span
-        style={style}
+        {...props}
         className={classnames('icon', className, {
           [`is-${size}`]: size,
           [`is-${align}`]: align,
diff --git a/src/components/image/image.js b/src/components/image/image.js
index a301c64b..635269eb 100644
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -45,21 +45,24 @@ export default class Image extends PureComponent {
   render() {
     const {
       className,
-      style,
       alt,
+      size,
+      fallback,
+      src,
+      ...props
     } = this.props;
 
-    let { size } = this.props;
+    let s = this.props.size;
 
     if (typeof size === 'number') {
-      size = `${size}x${size}`;
+      s = `${s}x${s}`;
     }
 
     return (
       <figure
-        style={style}
+        {...props}
         className={classnames('image', className, {
-          [`is-${size}`]: size,
+          [`is-${s}`]: s,
         })}
       >
         <img onError={this.onError} src={this.state.src} alt={alt} />
diff --git a/src/components/level/components/level-item.js b/src/components/level/components/level-item.js
index 00e7c108..dac292f2 100644
--- a/src/components/level/components/level-item.js
+++ b/src/components/level/components/level-item.js
@@ -21,14 +21,14 @@ export default class LevelItem extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('level-item', className, {
         })}
       >
diff --git a/src/components/level/components/level-side.js b/src/components/level/components/level-side.js
index 46c7136a..9e1c2b81 100644
--- a/src/components/level/components/level-side.js
+++ b/src/components/level/components/level-side.js
@@ -23,15 +23,15 @@ export default class LevelSide extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       align,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(className, {
           [`level-${align}`]: align,
         })}
diff --git a/src/components/level/level.js b/src/components/level/level.js
index bb7e2a9c..ea92b41e 100644
--- a/src/components/level/level.js
+++ b/src/components/level/level.js
@@ -32,15 +32,15 @@ export default class Level extends PureComponent {
     const {
       children,
       className,
-      style,
       breakpoint,
       renderAs,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('level', className, {
           [`is-${breakpoint}`]: breakpoint,
         })}
diff --git a/src/components/loader/loader.js b/src/components/loader/loader.js
index a9da42d2..a8d94065 100644
--- a/src/components/loader/loader.js
+++ b/src/components/loader/loader.js
@@ -21,14 +21,14 @@ export default class Loader extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('loader', className)}
       >
         {children}
diff --git a/src/components/media/components/media-content.js b/src/components/media/components/media-content.js
index fbad35a1..16dc7158 100644
--- a/src/components/media/components/media-content.js
+++ b/src/components/media/components/media-content.js
@@ -21,14 +21,14 @@ export default class MediaContent extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(className, 'content')}
       >
         {children}
diff --git a/src/components/media/components/media-item.js b/src/components/media/components/media-item.js
index 34f6ebbe..53dfa18d 100644
--- a/src/components/media/components/media-item.js
+++ b/src/components/media/components/media-item.js
@@ -23,21 +23,18 @@ export default class MediaItem extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      position,
       ...props
     } = this.props;
 
     const Element = renderAs;
-    let { position } = props;
-    if (position === 'center') {
-      position = 'content';
-    }
+    const p = position === 'center' ? 'content' : position;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(className, {
-          [`media-${position}`]: position,
+          [`media-${p}`]: p,
         })}
       >
         {children}
diff --git a/src/components/media/media.js b/src/components/media/media.js
index c55ea643..fe41337a 100644
--- a/src/components/media/media.js
+++ b/src/components/media/media.js
@@ -27,14 +27,14 @@ export default class Media extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('media', className, {
         })}
       >
diff --git a/src/components/media/media.story.js b/src/components/media/media.story.js
index 5e86a82c..096d98cd 100644
--- a/src/components/media/media.story.js
+++ b/src/components/media/media.story.js
@@ -12,9 +12,6 @@ import Section from '../section';
 import Box from '../box';
 import { Textarea, Field, Control } from '../form';
 
-console.log({ Media, Item: Media.Item });
-
-
 const style = { background: '#e6e6e6', width: 64, height: 64 };
 
 storiesOf('Media', module)
diff --git a/src/components/modal/__test__/__snapshots__/modal.test.js.snap b/src/components/modal/__test__/__snapshots__/modal.test.js.snap
index a15c09ce..3af8b74d 100644
--- a/src/components/modal/__test__/__snapshots__/modal.test.js.snap
+++ b/src/components/modal/__test__/__snapshots__/modal.test.js.snap
@@ -275,3 +275,7 @@ exports[`Modal component Should render any child type 1`] = `
   />
 </div>
 `;
+
+exports[`Modal component Should render empty because no document on scope 1`] = `""`;
+
+exports[`Modal component Should use global scope document 1`] = `null`;
diff --git a/src/components/modal/__test__/modal.test.js b/src/components/modal/__test__/modal.test.js
index 12ca706f..9813ee30 100644
--- a/src/components/modal/__test__/modal.test.js
+++ b/src/components/modal/__test__/modal.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-// import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { JSDOM } from 'jsdom';
+import { renderToString } from 'react-dom/server';
 import Modal from '..';
 
 describe('Modal component', () => {
@@ -148,6 +148,7 @@ describe('Modal component', () => {
     expect(modal).not.toBe(null);
   });
   it('Should render any child type', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     const onClose = jest.fn();
     component = mount(
@@ -160,6 +161,7 @@ describe('Modal component', () => {
         </div>
       </Modal>);
     expect(global.console.error).toBeCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
     expect(window.document.querySelector('div.modal.is-active')).toMatchSnapshot();
   });
@@ -219,4 +221,25 @@ describe('Modal component', () => {
     const modal = window.document.querySelector('div.modal.is-active');
     expect(modal).toMatchSnapshot();
   });
+  it('Should use global scope document', () => {
+    const onClose = jest.fn();
+    component = mount(
+      <Modal show onClose={onClose}>
+        <Modal.Content>
+          Content
+        </Modal.Content>
+      </Modal>);
+    component.setProps({ randomProp: 'test' });
+    expect(window.document.querySelector('div.modal.is-active')).toMatchSnapshot();
+  });
+
+  it('Should render empty because no document on scope', () => {
+    component = renderToString(
+      <Modal show onClose={() => {}}>
+        <Modal.Content>
+          Content
+        </Modal.Content>
+      </Modal>);
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/modal/components/card/body.js b/src/components/modal/components/card/body.js
index d8ea37b6..71a7c5bb 100644
--- a/src/components/modal/components/card/body.js
+++ b/src/components/modal/components/card/body.js
@@ -19,11 +19,11 @@ export default class ModalCardBody extends PureComponent {
     const {
       children,
       className,
-      style,
+      ...props
     } = this.props;
     return (
       <section
-        style={style}
+        {...props}
         className={classnames('modal-card-body', className)}
       >
         {children}
diff --git a/src/components/modal/components/card/card.js b/src/components/modal/components/card/card.js
index c9fdb1e3..08bec1d7 100644
--- a/src/components/modal/components/card/card.js
+++ b/src/components/modal/components/card/card.js
@@ -30,22 +30,22 @@ export default class ModalCard extends PureComponent {
   render() {
     const {
       className,
-      style,
+      onClose,
       ...props
     } = this.props;
 
     const children = React.Children.map(props.children, (child) => {
       if (child.type.toString().indexOf('ModalCardHead') !== -1) {
         return React.cloneElement(child, {
-          onClose: props.onClose,
+          onClose,
         });
       }
       return child;
     });
     return (
       <div
+        {...props}
         className={classnames('modal-card', className)}
-        style={style}
       >
         {children}
       </div>
diff --git a/src/components/modal/components/card/foot.js b/src/components/modal/components/card/foot.js
index 33247053..99f91c8d 100644
--- a/src/components/modal/components/card/foot.js
+++ b/src/components/modal/components/card/foot.js
@@ -19,11 +19,11 @@ export default class ModalCardFoot extends PureComponent {
     const {
       children,
       className,
-      style,
+      ...props
     } = this.props;
     return (
       <footer
-        style={style}
+        {...props}
         className={classnames('modal-card-foot', className)}
       >
         {children}
diff --git a/src/components/modal/components/card/head.js b/src/components/modal/components/card/head.js
index bd122565..635af00a 100644
--- a/src/components/modal/components/card/head.js
+++ b/src/components/modal/components/card/head.js
@@ -25,14 +25,14 @@ export default class ModalCardHead extends PureComponent {
     const {
       children,
       className,
-      style,
       showClose,
       onClose,
+      ...props
     } = this.props;
 
     return (
       <header
-        style={style}
+        {...props}
         className={classnames('modal-card-head', className)}
       >
         {children}
diff --git a/src/components/modal/components/card/title.js b/src/components/modal/components/card/title.js
index 5c564d6e..a9fdc5d5 100644
--- a/src/components/modal/components/card/title.js
+++ b/src/components/modal/components/card/title.js
@@ -5,10 +5,10 @@ import classnames from 'classnames';
 const ModalCardTitle = ({
   children,
   className,
-  style,
+  ...props
 }) => (
   <p
-    style={style}
+    {...props}
     className={classnames('modal-card-title', className)}
   >
     {children}
diff --git a/src/components/modal/components/content.js b/src/components/modal/components/content.js
index 8dee55f5..42c20e26 100644
--- a/src/components/modal/components/content.js
+++ b/src/components/modal/components/content.js
@@ -21,13 +21,13 @@ export default class ModalContent extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('modal-content', className)}
       >
         {children}
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 32f94c71..fade0592 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -32,8 +32,6 @@ export default class Modal extends PureComponent {
   static Content = ModalContent
   static Card = ModalCard
 
-  state = { d: null }
-
   componentDidMount() {
     const d = this.getDocument();
     this.portalElement = d.createElement('div');
@@ -53,7 +51,6 @@ export default class Modal extends PureComponent {
     }
   }
 
-  /* istanbul ignore next */
   getDocument = () => {
     if (this.props.document) {
       return this.props.document;
@@ -73,7 +70,7 @@ export default class Modal extends PureComponent {
   }
 
   render() {
-    if (!this.portalElement) {
+    if (!this.getDocument() || !this.portalElement) {
       return null;
     }
     const { closeOnBlur, show } = this.props;
diff --git a/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap b/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
index 9656d16d..7c60d585 100644
--- a/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
+++ b/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
@@ -65,9 +65,8 @@ exports[`Navbar component Should have Navbar classname 1`] = `
       className="navbar-start"
       style={Object {}}
     >
-      <a
-        Dropdown={true}
-        className="navbar-item is-hoverable"
+      <span
+        className="navbar-item has-dropdown is-hoverable"
         style={Object {}}
       >
         <span
@@ -99,7 +98,7 @@ exports[`Navbar component Should have Navbar classname 1`] = `
             Home
           </a>
         </span>
-      </a>
+      </span>
     </div>
   </div>
 </nav>
diff --git a/src/components/navbar/__test__/navbar.test.js b/src/components/navbar/__test__/navbar.test.js
index 60eff96e..64dee7cc 100644
--- a/src/components/navbar/__test__/navbar.test.js
+++ b/src/components/navbar/__test__/navbar.test.js
@@ -37,7 +37,7 @@ describe('Navbar component', () => {
         <div>TEST</div>
         <Navbar.Menu>
           <Navbar.Container>
-            <Navbar.Item Dropdown hoverable>
+            <Navbar.Item dropdown hoverable>
               <Navbar.Link>
                 Docs
               </Navbar.Link>
diff --git a/src/components/navbar/components/brand.js b/src/components/navbar/components/brand.js
index b0cbe0dd..c8e59654 100644
--- a/src/components/navbar/components/brand.js
+++ b/src/components/navbar/components/brand.js
@@ -22,11 +22,15 @@ export default class Brand extends React.PureComponent {
 
   render() {
     const {
-      style, className, children, active, toggleMenu,
+      className,
+      children,
+      active,
+      toggleMenu,
+      ...props
     } = this.props;
     return (
       <div
-        style={style}
+        {...props}
         className={classnames('navbar-brand', className)}
       >
         {React.Children.map(children, (child) => {
diff --git a/src/components/navbar/components/burger.js b/src/components/navbar/components/burger.js
index 9a760396..421e965f 100644
--- a/src/components/navbar/components/burger.js
+++ b/src/components/navbar/components/burger.js
@@ -26,7 +26,12 @@ export default class Burger extends React.PureComponent {
 
   render() {
     const {
-      style, className, active, onClick, toggleMenu, ...props
+      style,
+      className,
+      active,
+      onClick,
+      toggleMenu,
+      ...props
     } = this.props;
     return (
       <div
diff --git a/src/components/navbar/components/container.js b/src/components/navbar/components/container.js
index a7944d00..a405d464 100644
--- a/src/components/navbar/components/container.js
+++ b/src/components/navbar/components/container.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const Container = ({
-  style,
   className,
   renderAs,
   children,
@@ -13,11 +12,10 @@ const Container = ({
   const Element = renderAs;
   return (
     <Element
-      style={style}
+      {...props}
       className={classnames({
         [`navbar-${position}`]: position,
       }, className)}
-      {...props}
     >
       {children}
     </Element>
diff --git a/src/components/navbar/components/divider.js b/src/components/navbar/components/divider.js
index 22be2c43..aa3e684d 100644
--- a/src/components/navbar/components/divider.js
+++ b/src/components/navbar/components/divider.js
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const Divider = ({
-  style, className,
+  className,
+  ...props
 }) => (
   <div
-    style={style}
+    {...props}
     className={classnames('navbar-divider', className)}
   />
 );
diff --git a/src/components/navbar/components/dropdown.js b/src/components/navbar/components/dropdown.js
index 790b65dd..465adb98 100644
--- a/src/components/navbar/components/dropdown.js
+++ b/src/components/navbar/components/dropdown.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const Dropdown = ({
-  style,
   className,
   renderAs,
   boxed,
@@ -14,12 +13,11 @@ const Dropdown = ({
   const Element = renderAs;
   return (
     <Element
-      style={style}
+      {...props}
       className={classnames('navbar-dropdown', className, {
         'is-boxed': boxed,
         'is-right': right,
       })}
-      {...props}
     >
       {children}
     </Element>
diff --git a/src/components/navbar/components/item.js b/src/components/navbar/components/item.js
index 0cdd4315..215c73b2 100644
--- a/src/components/navbar/components/item.js
+++ b/src/components/navbar/components/item.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const Item = ({
-  style,
   className,
   active,
   renderAs,
@@ -19,14 +18,13 @@ const Item = ({
   }
   return (
     <Element
-      style={style}
+      {...props}
       className={classnames('navbar-item', className, {
       'is-active': active,
       'has-dropdown': dropdown,
       'is-hoverable': hoverable,
       'has-dropdown-up': dropdownUp,
     })}
-      {...props}
     >
       {children}
     </Element>
diff --git a/src/components/navbar/components/link.js b/src/components/navbar/components/link.js
index 8872f8a7..62c0ec1e 100644
--- a/src/components/navbar/components/link.js
+++ b/src/components/navbar/components/link.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const Link = ({
-  style,
   className,
   renderAs,
   children,
@@ -12,9 +11,8 @@ const Link = ({
   const Element = renderAs;
   return (
     <Element
-      style={style}
-      className={classnames('navbar-link', className)}
       {...props}
+      className={classnames('navbar-link', className)}
     >
       {children}
     </Element>
diff --git a/src/components/navbar/components/menu.js b/src/components/navbar/components/menu.js
index 33257b7c..80efe767 100644
--- a/src/components/navbar/components/menu.js
+++ b/src/components/navbar/components/menu.js
@@ -3,14 +3,16 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const Menu = ({
-  style, className, active, children, ...props
+  className,
+  active,
+  children,
+  ...props
 }) => (
   <div
-    style={style}
+    {...props}
     className={classnames('navbar-menu', className, {
       'is-active': active,
     })}
-    {...props}
   >
     {children}
   </div>
diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js
index 1686b9df..24da7c02 100644
--- a/src/components/navbar/navbar.js
+++ b/src/components/navbar/navbar.js
@@ -78,18 +78,18 @@ export default class Navbar extends React.PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       fixed,
       transparent,
       color,
+      ...props
     } = this.props;
     const Element = renderAs;
 
     return (
       <Element
+        {...props}
         role="navigation"
-        style={style}
         className={classnames('navbar', className, {
           'is-transparent': transparent,
           [`is-fixed-${fixed}`]: fixed,
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index df8e1493..9b5dc505 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -2,7 +2,9 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import notification from '../../modifiers/notification';
+import CONSTANTS from '../../constants';
+
+const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
 
 export default class Notification extends PureComponent {
   static propTypes = {
@@ -10,7 +12,7 @@ export default class Notification extends PureComponent {
     className: PropTypes.string,
     style: PropTypes.shape({}),
     renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    ...notification.propTypes,
+    color: PropTypes.oneOf(colors),
   }
 
   static defaultProps = {
@@ -18,23 +20,25 @@ export default class Notification extends PureComponent {
     className: '',
     style: {},
     renderAs: 'div',
-    ...notification.defaultProps,
+    color: null,
   }
 
   render() {
     const {
       children,
       className,
-      style,
       renderAs,
+      color,
       ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
-        className={classnames(notification.className({ ...props, notification: true }), className)}
+        {...props}
+        className={classnames('notification', {
+          [`is-${color}`]: color,
+        }, className)}
       >
         {children}
       </Element>
diff --git a/src/components/pagination/__test__/pagination.test.js b/src/components/pagination/__test__/pagination.test.js
index ae6b4938..766a512e 100644
--- a/src/components/pagination/__test__/pagination.test.js
+++ b/src/components/pagination/__test__/pagination.test.js
@@ -5,9 +5,11 @@ import Pagination from '..';
 
 describe('Pagination component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.warn = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
   it('Pagination Should Exist', () => {
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index 69c0d1c8..ce32e469 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -17,6 +17,10 @@ class Pagination extends React.PureComponent {
     previous: PropTypes.node,
     showPrevNext: PropTypes.bool,
     autoHide: PropTypes.bool,
+    /**
+     * Classname of the container of the pagination, this could be used to customize the inner views
+     */
+    className: PropTypes.string,
   }
 
   static defaultProps = {
@@ -28,6 +32,7 @@ class Pagination extends React.PureComponent {
     previous: 'Previous',
     showPrevNext: true,
     autoHide: true,
+    className: '',
   }
 
   goToPage = page => (evt) => {
@@ -56,12 +61,24 @@ class Pagination extends React.PureComponent {
   }
 
   render() {
-    const { current, total, next, previous, showPrevNext, delta, autoHide } = this.props;
+    const {
+      current,
+      total,
+      next,
+      previous,
+      showPrevNext,
+      delta,
+      autoHide,
+      className,
+      onChange,
+      ...props
+    } = this.props;
     if (total <= 1 && autoHide) {
       return null;
     }
 
     if (current > total) {
+      // eslint-disable-next-line no-console
       console.warn('Pagination controller: Current page can not be greater than total');
       return null;
     }
@@ -70,7 +87,11 @@ class Pagination extends React.PureComponent {
     const lastPage = this.lastPage(current, total);
 
     return (
-      <nav className="pagination" aria-label="pagination">
+      <nav
+        {...props}
+        className={classnames('pagination', className)}
+        aria-label="pagination"
+      >
         {
           showPrevNext &&
             <React.Fragment>
diff --git a/src/components/progress/progress.js b/src/components/progress/progress.js
index 9f1843db..4537e165 100644
--- a/src/components/progress/progress.js
+++ b/src/components/progress/progress.js
@@ -25,16 +25,16 @@ export default class Progress extends PureComponent {
   render() {
     const {
       className,
-      style,
       value,
       max,
       color,
       size,
+      ...props
     } = this.props;
 
     return (
       <progress
-        style={style}
+        {...props}
         value={value}
         max={max}
         className={classnames('progress', className, {
diff --git a/src/components/section/section.js b/src/components/section/section.js
index 95cf2f24..4ba614bc 100644
--- a/src/components/section/section.js
+++ b/src/components/section/section.js
@@ -23,14 +23,14 @@ export default class Section extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       size,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('section', className, {
           [`is-${size}`]: size,
         })}
diff --git a/src/components/table/table.js b/src/components/table/table.js
index daf9c8e6..9622de85 100644
--- a/src/components/table/table.js
+++ b/src/components/table/table.js
@@ -25,14 +25,14 @@ export default class Table extends PureComponent {
     const {
       children,
       className,
-      style,
       size,
       striped,
       bordered,
+      ...props
     } = this.props;
     return (
       <table
-        style={style}
+        {...props}
         className={classnames('table', className, {
           [`is-${size}`]: size,
           'is-bordered': bordered,
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index eea31ade..fe755305 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -36,18 +36,18 @@ export default class Tabs extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       align,
       size,
       type,
       fullwidth,
+      ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('tabs', className, {
           [`is-${align}`]: align,
           [`is-${size}`]: size,
diff --git a/src/components/tag/components/tag-group.js b/src/components/tag/components/tag-group.js
index 83e6a44f..22a53dcc 100644
--- a/src/components/tag/components/tag-group.js
+++ b/src/components/tag/components/tag-group.js
@@ -21,13 +21,13 @@ export default class TagGroup extends PureComponent {
     const {
       children,
       className,
-      style,
       gapless,
+      ...props
     } = this.props;
 
     return (
       <span
-        style={style}
+        {...props}
         className={classnames('tags', className, {
           'has-addons': gapless,
         })}
diff --git a/src/components/tag/tag.js b/src/components/tag/tag.js
index 9b13d217..d3dfcb7a 100644
--- a/src/components/tag/tag.js
+++ b/src/components/tag/tag.js
@@ -36,17 +36,17 @@ export default class Tag extends PureComponent {
     const {
       children,
       className,
-      style,
       color,
       size,
       rounded,
       remove,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('tag', className, {
           [`is-${size}`]: size,
           [`is-${color}`]: color,
diff --git a/src/components/tile/tile.js b/src/components/tile/tile.js
index 3712b503..ec4227b8 100644
--- a/src/components/tile/tile.js
+++ b/src/components/tile/tile.js
@@ -1,8 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import CONSTANTS from '../../constants';
+
+const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
 
-import notification from '../../modifiers/notification';
 
 export default class Tile extends PureComponent {
   static propTypes = {
@@ -13,7 +15,8 @@ export default class Tile extends PureComponent {
     kind: PropTypes.oneOf(['ancestor', 'parent', 'child']),
     vertical: PropTypes.bool,
     size: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-    ...notification.propTypes,
+    color: PropTypes.oneOf(colors),
+    notification: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -24,33 +27,35 @@ export default class Tile extends PureComponent {
     kind: null,
     vertical: false,
     size: null,
-    ...notification.defaultProps,
+    color: null,
+    notification: false,
   }
 
   render() {
     const {
       children,
       className,
-      style,
       renderAs,
       kind,
       vertical,
       size,
+      color,
+      notification,
       ...props
     } = this.props;
 
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames(
           'tile', className, {
+            notification,
             [`is-${kind}`]: kind,
             [`is-${size}`]: size,
+            [`is-${color}`]: color,
             'is-vertical': vertical,
-          },
-          notification.className(props),
-  )
+          })
         }
       >
         {children}
diff --git a/src/modifiers/events/events.js b/src/modifiers/events/events.js
deleted file mode 100644
index 20d98d7e..00000000
--- a/src/modifiers/events/events.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default {
-  propTypes: {
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onClick: PropTypes.func,
-  },
-  defaultProps: {
-    onChange: () => {},
-    onFocus: () => {},
-    onBlur: () => {},
-    onClick: () => {},
-  },
-  props: ({
-    onChange,
-    onFocus,
-    onBlur,
-    onClick,
-  }) => ({
-    onChange,
-    onFocus,
-    onBlur,
-    onClick,
-  }),
-};
diff --git a/src/modifiers/events/index.js b/src/modifiers/events/index.js
deleted file mode 100644
index f2b79d29..00000000
--- a/src/modifiers/events/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './events';
diff --git a/src/modifiers/notification/index.js b/src/modifiers/notification/index.js
deleted file mode 100644
index 2dca8e80..00000000
--- a/src/modifiers/notification/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import './notification.sass';
-import CONSTANTS from '../../constants';
-
-const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
-
-
-export default {
-  propTypes: {
-    color: PropTypes.oneOf(colors),
-    notification: PropTypes.bool,
-  },
-  className: ({
-    notification,
-    color,
-  }) => classnames({
-    notification,
-    [`is-${color}`]: color,
-  }),
-  defaultProps: {
-    color: null,
-    notification: false,
-  },
-};
diff --git a/src/modifiers/notification/notification.sass b/src/modifiers/notification/notification.sass
deleted file mode 100644
index 469537bb..00000000
--- a/src/modifiers/notification/notification.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '~bulma/sass/utilities/_all.sass';
-@import '~bulma/sass/elements/notification.sass';
\ No newline at end of file