diff --git a/package-lock.json b/package-lock.json
index 94fbcb22f..ec519c8b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,8 @@
   "requires": true,
   "packages": {
     "": {
-      "version": "4.0.7",
+      "name": "react-bulma-components",
+      "version": "4.1.0",
       "license": "MIT",
       "dependencies": {
         "classnames": "2.3.1"
@@ -41,7 +42,7 @@
         "babel-jest": "26.6.3",
         "babel-plugin-transform-react-remove-prop-types": "0.4.24",
         "babel-runtime": "6.26.0",
-        "bulma": "0.9.2",
+        "bulma": "0.9.4",
         "chai": "4.3.4",
         "coveralls": "3.1.0",
         "emotion": "11.0.0",
@@ -7286,9 +7287,9 @@
       "dev": true
     },
     "node_modules/bulma": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
-      "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
       "dev": true
     },
     "node_modules/bytes": {
@@ -30746,9 +30747,9 @@
       "dev": true
     },
     "bulma": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
-      "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
       "dev": true
     },
     "bytes": {
diff --git a/package.json b/package.json
index a76ff45b2..96f876bc0 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "babel-jest": "26.6.3",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-runtime": "6.26.0",
-    "bulma": "0.9.2",
+    "bulma": "0.9.4",
     "chai": "4.3.4",
     "coveralls": "3.1.0",
     "emotion": "11.0.0",
diff --git a/src/components/button/__test__/__snapshots__/button.test.js.snap b/src/components/button/__test__/__snapshots__/button.test.js.snap
index b6e2d3e3c..b30de83ef 100644
--- a/src/components/button/__test__/__snapshots__/button.test.js.snap
+++ b/src/components/button/__test__/__snapshots__/button.test.js.snap
@@ -102,6 +102,13 @@ exports[`Button component Should be a Large Primary Button 1`] = `
 />
 `;
 
+exports[`Button component Should be a Normal Primary Button 1`] = `
+<button
+  className="is-primary is-normal button"
+  tabIndex={0}
+/>
+`;
+
 exports[`Button component Should be a Primary Button 1`] = `
 <button
   className="is-primary button"
@@ -109,6 +116,13 @@ exports[`Button component Should be a Primary Button 1`] = `
 />
 `;
 
+exports[`Button component Should be a Responsive Primary Button 1`] = `
+<button
+  className="is-primary is-responsive button"
+  tabIndex={0}
+/>
+`;
+
 exports[`Button component Should be a default Button 1`] = `
 <button
   className="button"
diff --git a/src/components/button/__test__/button.test.js b/src/components/button/__test__/button.test.js
index ed160547d..a342403de 100644
--- a/src/components/button/__test__/button.test.js
+++ b/src/components/button/__test__/button.test.js
@@ -39,6 +39,14 @@ describe('Button component', () => {
     const component = renderer.create(<Button color="primary" size="large" />);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be a Normal Primary Button', () => {
+    const component = renderer.create(<Button color="primary" size="normal" />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should be a Responsive Primary Button', () => {
+    const component = renderer.create(<Button color="primary" responsive />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should render as a static Button', () => {
     const component = renderer.create(<Button isStatic color="primary" />);
     expect(component.toJSON()).toMatchSnapshot();
diff --git a/src/components/button/button.js b/src/components/button/button.js
index d1ed43f55..74afaee15 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -11,6 +11,7 @@ const Button = ({
   renderAs,
   color,
   size,
+  responsive,
   outlined,
   inverted,
   submit,
@@ -58,6 +59,7 @@ const Button = ({
       className={classnames(className, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
+        'is-responsive': responsive,
         'is-selected': isSelected,
         'is-static': isStatic,
         'is-rounded': rounded,
@@ -101,9 +103,10 @@ Button.propTypes = {
     PropTypes.string,
   ]),
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
+  responsive: PropTypes.bool,
   /**
    * Whether Button should have an outline.
    */
diff --git a/src/components/button/button.story.js b/src/components/button/button.story.js
index 406def08e..92431d859 100644
--- a/src/components/button/button.story.js
+++ b/src/components/button/button.story.js
@@ -74,7 +74,16 @@ Default.argTypes = {
     },
     control: {
       type: 'select',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['default', 'small', 'normal', 'medium', 'large'],
+    },
+  },
+  responsive: {
+    table: {
+      category: 'Button',
+    },
+    description: 'Whether the button should adjust size based on breakpoints',
+    control: {
+      type: 'boolean',
     },
   },
   colorVariant: {
diff --git a/src/components/button/index.d.ts b/src/components/button/index.d.ts
index 0c5100478..3f57618eb 100644
--- a/src/components/button/index.d.ts
+++ b/src/components/button/index.d.ts
@@ -1,18 +1,19 @@
-import { BulmaComponent } from '..';
-import { Color, Size } from '..';
+import { BulmaComponent, Color, Size } from '..';
 
 interface ButtonProps {
-  color?: Color
-  | 'ghost'
-  | 'black-bis'
-  | 'black-ter'
-  | 'white-bis'
-  | 'white-ter'
-  | 'grey-darker'
-  | 'grey-dark'
-  | 'grey-light'
-  | 'grey-lighter';
-  size?: Size;
+  color?:
+    | Color
+    | 'ghost'
+    | 'black-bis'
+    | 'black-ter'
+    | 'white-bis'
+    | 'white-ter'
+    | 'grey-darker'
+    | 'grey-dark'
+    | 'grey-light'
+    | 'grey-lighter';
+  size?: Size & 'normal';
+  responsive?: boolean;
   state?: 'hover' | 'focus' | 'active';
   outlined?: boolean;
   inverted?: boolean;
@@ -38,4 +39,4 @@ declare const Button: BulmaComponent<ButtonProps, 'button'> & {
   Group: BulmaComponent<ButtonGroupProps, 'div'>;
 };
 
-export default Button
\ No newline at end of file
+export default Button
diff --git a/src/components/content/__test__/__snapshots__/content.test.js.snap b/src/components/content/__test__/__snapshots__/content.test.js.snap
index cd6e3bf7a..d71fc905f 100644
--- a/src/components/content/__test__/__snapshots__/content.test.js.snap
+++ b/src/components/content/__test__/__snapshots__/content.test.js.snap
@@ -16,3 +16,20 @@ exports[`Content component Should have content classname 1`] = `
   </p>
 </div>
 `;
+
+exports[`Content component Should have content classname with normal size 1`] = `
+<div
+  className="content is-normal"
+>
+  <p
+    className="bd-notification is-success"
+  >
+    <p>
+      Default
+    </p>
+    <p>
+      Container
+    </p>
+  </p>
+</div>
+`;
diff --git a/src/components/content/__test__/content.test.js b/src/components/content/__test__/content.test.js
index f4514ace5..76b174e4a 100644
--- a/src/components/content/__test__/content.test.js
+++ b/src/components/content/__test__/content.test.js
@@ -14,4 +14,15 @@ describe('Content component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should have content classname with normal size', () => {
+    const component = renderer.create(
+      <Content size="normal">
+        <p className="bd-notification is-success">
+          <p>Default</p>
+          <p>Container</p>
+        </p>
+      </Content>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/content/content.js b/src/components/content/content.js
index 16f43ca6c..0bb7eb77f 100644
--- a/src/components/content/content.js
+++ b/src/components/content/content.js
@@ -19,7 +19,7 @@ const Content = ({ children, className, size, ...props }) => {
 
 Content.propTypes = {
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
 };
diff --git a/src/components/content/content.story.js b/src/components/content/content.story.js
index a382ce465..8dc766d65 100644
--- a/src/components/content/content.story.js
+++ b/src/components/content/content.story.js
@@ -164,7 +164,7 @@ Default.argTypes = {
   size: {
     control: {
       type: 'select',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['default', 'small', 'normal', 'medium', 'large'],
     },
   },
 };
diff --git a/src/components/content/index.d.ts b/src/components/content/index.d.ts
index 53e366e0c..147eaab7d 100644
--- a/src/components/content/index.d.ts
+++ b/src/components/content/index.d.ts
@@ -1,10 +1,9 @@
-import { BulmaComponent } from '..';
-import { Size } from '..';
+import { BulmaComponent, Size } from '..';
 
 interface ContentProps {
-  size?: Size;
+  size?: Size & 'normal';
 }
 
 declare const Content: BulmaComponent<ContentProps, 'div'>;
 
-export default Content;
\ No newline at end of file
+export default Content;
diff --git a/src/components/dropdown/__test__/__snapshots__/dropdown.test.js.snap b/src/components/dropdown/__test__/__snapshots__/dropdown.test.js.snap
index 417134ccd..07fce336d 100644
--- a/src/components/dropdown/__test__/__snapshots__/dropdown.test.js.snap
+++ b/src/components/dropdown/__test__/__snapshots__/dropdown.test.js.snap
@@ -12,6 +12,8 @@ exports[`Dropdown component Should appear above the dropdown button 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -59,6 +61,8 @@ exports[`Dropdown component Should be right-aligned when using "right" prop 1`]
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -106,6 +110,8 @@ exports[`Dropdown component Should concat Bulma class with classes in props 1`]
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -150,6 +156,8 @@ exports[`Dropdown component Should have custom inline styles 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -194,6 +202,8 @@ exports[`Dropdown component Should have divider 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -244,6 +254,8 @@ exports[`Dropdown component Should have dropdown classname 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -273,6 +285,8 @@ exports[`Dropdown component Should have dropdown classname 1`] = `
 </div>
 `;
 
+exports[`Dropdown component Should pass specified ID to the menu component 1`] = `ShallowWrapper {}`;
+
 exports[`Dropdown component Should show custom label passed to the label prop 1`] = `
 <div
   className="dropdown"
@@ -283,6 +297,8 @@ exports[`Dropdown component Should show custom label passed to the label prop 1`
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -322,6 +338,8 @@ exports[`Dropdown component Should show the label of the first dropdown item whe
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -361,6 +379,8 @@ exports[`Dropdown component should also be right-aligned when using "align" prop
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
diff --git a/src/components/element/__test__/__snapshots__/element.test.js.snap b/src/components/element/__test__/__snapshots__/element.test.js.snap
index dd8739a11..0cba7f177 100644
--- a/src/components/element/__test__/__snapshots__/element.test.js.snap
+++ b/src/components/element/__test__/__snapshots__/element.test.js.snap
@@ -11,7 +11,7 @@ exports[`Element component Should accept a react Element as renderAs prop 1`] =
 
 exports[`Element component Should have helpers classnames 1`] = `
 <div
-  className="has-text-white is-pulled-left"
+  className="has-text-white is-pulled-left is-underline"
 >
   Facebook
 </div>
diff --git a/src/components/element/__test__/element.test.js b/src/components/element/__test__/element.test.js
index 40be5a27c..5e22ba22a 100644
--- a/src/components/element/__test__/element.test.js
+++ b/src/components/element/__test__/element.test.js
@@ -9,7 +9,7 @@ describe('Element component', () => {
   });
   it('Should have helpers classnames', () => {
     const component = renderer.create(
-      <Element textColor="white" pull="left">
+      <Element textColor="white" pull="left" underline>
         Facebook
       </Element>,
     );
@@ -17,7 +17,7 @@ describe('Element component', () => {
   });
   it('Should accept a react Element as renderAs prop', () => {
     // eslint-disable-next-line react/prop-types
-    const Custom = props => (
+    const Custom = (props) => (
       <p {...props}>
         Custom
         {props.children}
diff --git a/src/components/element/element.js b/src/components/element/element.js
index 1371b6a11..ac9d1ccd0 100644
--- a/src/components/element/element.js
+++ b/src/components/element/element.js
@@ -11,9 +11,8 @@ const buildResponsiveness = (
 
   return classnames({
     [`is-${display}-${currentViewport}${suffix}`]: display,
-    [`has-text-${normalizeAlign(
+    [`has-text-${normalizeAlign(textAlign)}-${currentViewport}${suffix}`]:
       textAlign,
-    )}-${currentViewport}${suffix}`]: textAlign,
     [`is-size-${textSize}-${currentViewport}${suffix}`]: textSize,
     [`is-invisible-${currentViewport}${suffix}`]: invisible,
   });
@@ -60,6 +59,7 @@ export const useElementClassNames = ({
   textWeight,
   textTransform,
   italic,
+  underline,
   textSize,
   textAlign,
   textFamily,
@@ -119,6 +119,7 @@ export const useElementClassNames = ({
         [`is-${textTransform}`]: textTransform,
         [`is-family-${textFamily}`]: textFamily,
         'is-italic': italic,
+        'is-underline': underline,
       },
       buildResponsiveness('mobile', mobile),
       buildResponsiveness('tablet', tablet),
@@ -209,6 +210,7 @@ Element.propTypes = {
   flexWrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
   flexGrow: PropTypes.oneOf([0, 1, 2, 3, 4, 5]),
   italic: PropTypes.bool,
+  underline: PropTypes.bool,
   invisible: PropTypes.bool,
   justifyContent: PropTypes.oneOf([
     'flex-start',
@@ -223,37 +225,37 @@ Element.propTypes = {
     'right',
   ]),
   m: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   mt: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   mr: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   mb: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   ml: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   mx: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   my: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
@@ -261,37 +263,37 @@ Element.propTypes = {
   overlay: PropTypes.bool,
   paddingless: PropTypes.bool,
   p: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   pt: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   pr: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   pb: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   pl: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   px: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
   py: PropTypes.oneOfType([
-    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 'auto']),
     PropTypes.number,
     PropTypes.string,
   ]),
diff --git a/src/components/form/components/__test__/__snapshots__/field.test.js.snap b/src/components/form/components/__test__/__snapshots__/field.test.js.snap
index 3e068a349..7f1f45944 100644
--- a/src/components/form/components/__test__/__snapshots__/field.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/field.test.js.snap
@@ -90,3 +90,20 @@ exports[`Field component Should have field-label classname 1`] = `
   </p>
 </div>
 `;
+
+exports[`Field component Should have field-label classname with normal size 1`] = `
+<div
+  className="field-label is-normal"
+>
+  <p
+    className="bd-notification is-success"
+  >
+    <p>
+      Default
+    </p>
+    <p>
+      Container
+    </p>
+  </p>
+</div>
+`;
diff --git a/src/components/form/components/__test__/__snapshots__/input-file.test.js.snap b/src/components/form/components/__test__/__snapshots__/input-file.test.js.snap
index 40fd660f5..1f4e168c5 100644
--- a/src/components/form/components/__test__/__snapshots__/input-file.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/input-file.test.js.snap
@@ -2,9 +2,9 @@
 
 exports[`Dropdown component Should Exist 1`] = `[Function]`;
 
-exports[`Dropdown component Should be centered 1`] = `
+exports[`Dropdown component Should be centered and normal 1`] = `
 <div
-  className="file is-centered has-name"
+  className="file is-normal is-centered has-name"
 >
   <label
     className="file-label"
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 d0ee447d4..765b30b8c 100644
--- a/src/components/form/components/__test__/__snapshots__/input.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/input.test.js.snap
@@ -16,6 +16,13 @@ exports[`Input component Should be large and readOnly 1`] = `
 />
 `;
 
+exports[`Input component Should be normal 1`] = `
+<input
+  className="input is-normal"
+  readOnly={true}
+/>
+`;
+
 exports[`Input component Should be rounded 1`] = `
 <input
   className="input is-rounded"
diff --git a/src/components/form/components/__test__/__snapshots__/label.test.js.snap b/src/components/form/components/__test__/__snapshots__/label.test.js.snap
index 84dda3b4a..338b8c9f2 100644
--- a/src/components/form/components/__test__/__snapshots__/label.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/label.test.js.snap
@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Label component Should be normal 1`] = `
+<label
+  className="label is-normal"
+>
+  Test 
+  <a>
+    Give me
+  </a>
+</label>
+`;
+
 exports[`Label component Should concat classname in props with Bulma classname 1`] = `
 <label
   className="label other-class this-is-a-test"
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 f73c33c1f..b03994163 100644
--- a/src/components/form/components/__test__/__snapshots__/select.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/select.test.js.snap
@@ -79,6 +79,27 @@ exports[`Select component Should be loading 1`] = `
 </div>
 `;
 
+exports[`Select component Should be normal 1`] = `
+<div
+  className="select is-normal is-danger is-multiple"
+>
+  <select
+    disabled={true}
+    multiple={true}
+  >
+    <option>
+      1
+    </option>
+    <option>
+      2
+    </option>
+    <option>
+      3
+    </option>
+  </select>
+</div>
+`;
+
 exports[`Select component Should be rounded 1`] = `
 <div
   className="select is-rounded"
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 efab996ec..759be6577 100644
--- a/src/components/form/components/__test__/__snapshots__/textarea.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/textarea.test.js.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Textarea component Should be normal 1`] = `
+<textarea
+  className="textarea is-normal"
+/>
+`;
+
 exports[`Textarea component Should concat classname in props with Bulma classname 1`] = `
 <textarea
   className="textarea other-class this-is-a-test"
diff --git a/src/components/form/components/__test__/field.test.js b/src/components/form/components/__test__/field.test.js
index a799b1c34..1f05221de 100644
--- a/src/components/form/components/__test__/field.test.js
+++ b/src/components/form/components/__test__/field.test.js
@@ -32,6 +32,17 @@ describe('Field component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should have field-label classname with normal size', () => {
+    const component = renderer.create(
+      <Field.Label size="normal">
+        <p className="bd-notification is-success">
+          <p>Default</p>
+          <p>Container</p>
+        </p>
+      </Field.Label>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should have field-body classname', () => {
     const component = renderer.create(
       <Field.Body>
diff --git a/src/components/form/components/__test__/input-file.test.js b/src/components/form/components/__test__/input-file.test.js
index c8a6d8d73..a6b64f210 100644
--- a/src/components/form/components/__test__/input-file.test.js
+++ b/src/components/form/components/__test__/input-file.test.js
@@ -30,9 +30,9 @@ describe('Dropdown component', () => {
     expect(InputFile).toMatchSnapshot();
   });
 
-  it('Should be centered', () => {
+  it('Should be centered and normal', () => {
     const component = renderer.create(
-      <InputFile filename="test.js" align="center" />,
+      <InputFile filename="test.js" align="center" size="normal" />,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
diff --git a/src/components/form/components/__test__/input.test.js b/src/components/form/components/__test__/input.test.js
index f49e88b40..8a03db74e 100644
--- a/src/components/form/components/__test__/input.test.js
+++ b/src/components/form/components/__test__/input.test.js
@@ -24,6 +24,10 @@ describe('Input component', () => {
     const component = renderer.create(<Input color="success" type="email" />);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be normal', () => {
+    const component = renderer.create(<Input readOnly size="normal" />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should be large and readOnly', () => {
     const component = renderer.create(<Input readOnly size="large" />);
     expect(component.toJSON()).toMatchSnapshot();
diff --git a/src/components/form/components/__test__/label.test.js b/src/components/form/components/__test__/label.test.js
index 299d9b603..21ab14034 100644
--- a/src/components/form/components/__test__/label.test.js
+++ b/src/components/form/components/__test__/label.test.js
@@ -14,6 +14,14 @@ describe('Label component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be normal', () => {
+    const component = renderer.create(
+      <Label size="normal">
+        Test <a>Give me</a>
+      </Label>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should concat classname in props with Bulma classname', () => {
     const component = renderer.create(
       <Label className="other-class this-is-a-test">
diff --git a/src/components/form/components/__test__/select.test.js b/src/components/form/components/__test__/select.test.js
index 20c349740..0db4bac08 100644
--- a/src/components/form/components/__test__/select.test.js
+++ b/src/components/form/components/__test__/select.test.js
@@ -36,6 +36,16 @@ describe('Select component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be normal', () => {
+    const component = renderer.create(
+      <Select color="danger" size="normal" multiple disabled>
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+      </Select>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should be large, red, disabled and multioption', () => {
     const component = renderer.create(
       <Select color="danger" size="large" multiple disabled>
diff --git a/src/components/form/components/__test__/textarea.test.js b/src/components/form/components/__test__/textarea.test.js
index d68ff3ba0..9cc9461ba 100644
--- a/src/components/form/components/__test__/textarea.test.js
+++ b/src/components/form/components/__test__/textarea.test.js
@@ -10,6 +10,10 @@ describe('Textarea component', () => {
     const component = renderer.create(<Textarea />);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be normal', () => {
+    const component = renderer.create(<Textarea size="normal" />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should concat classname in props with Bulma classname', () => {
     const component = renderer.create(
       <Textarea className="other-class this-is-a-test" />,
diff --git a/src/components/form/components/field/field.js b/src/components/form/components/field/field.js
index bb645bdc9..af755ef03 100644
--- a/src/components/form/components/field/field.js
+++ b/src/components/form/components/field/field.js
@@ -51,7 +51,7 @@ Field.propTypes = {
    * When this prop is set this value will be used as size for `Form.Label` `Form.Input`, `Form.Textarea`, `Form.Select`, `Button` and `Icon` inside the field
    */
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
   /**
diff --git a/src/components/form/components/input-file.js b/src/components/form/components/input-file.js
index 5f1ace2ae..f3202b6ff 100644
--- a/src/components/form/components/input-file.js
+++ b/src/components/form/components/input-file.js
@@ -91,7 +91,7 @@ InputFile.propTypes = {
    * The size of `InputFile`
    */
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
   /**
diff --git a/src/components/form/components/input.js b/src/components/form/components/input.js
index 4f029a12f..77070fa86 100644
--- a/src/components/form/components/input.js
+++ b/src/components/form/components/input.js
@@ -38,7 +38,7 @@ Input.propTypes = {
    * Adjusts the size of this input.
    */
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
   /**
diff --git a/src/components/form/components/label.js b/src/components/form/components/label.js
index c82833608..9ad8c3191 100644
--- a/src/components/form/components/label.js
+++ b/src/components/form/components/label.js
@@ -22,7 +22,7 @@ const Label = ({ children, className, size, ...props }) => {
 
 Label.propTypes = {
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
   renderAs: PropTypes.oneOfType([
diff --git a/src/components/form/components/select.js b/src/components/form/components/select.js
index c784b5da6..dbf229a31 100644
--- a/src/components/form/components/select.js
+++ b/src/components/form/components/select.js
@@ -60,7 +60,7 @@ Select.propTypes = {
    * Adjusts the size of this component.
    */
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
   /**
diff --git a/src/components/form/components/textarea.js b/src/components/form/components/textarea.js
index e857a885f..67d7a9814 100644
--- a/src/components/form/components/textarea.js
+++ b/src/components/form/components/textarea.js
@@ -26,7 +26,7 @@ Textarea.propTypes = {
    * Adjusts the size of the textarea input
    */
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
   /**
diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
index 2ca832893..63be7ab5b 100644
--- a/src/components/form/index.d.ts
+++ b/src/components/form/index.d.ts
@@ -4,8 +4,11 @@ import {
   OmitKeys,
   BulmaComponent,
   BulmaComponentWithoutRenderAs,
+  Color,
+  Size,
 } from '..';
-import { Color, Size } from '..';
+
+type InputSize = Size & 'normal';
 
 interface FieldProps {
   align?: 'center' | 'right';
@@ -15,7 +18,7 @@ interface FieldProps {
 }
 
 interface FieldLabelProps {
-  size?: Size;
+  size?: InputSize;
 }
 
 interface ControlProps {
@@ -25,7 +28,7 @@ interface ControlProps {
 }
 
 interface InputProps<T> {
-  size?: Size;
+  size?: InputSize;
   color?: Color;
   readOnly?: boolean;
   isStatic?: boolean;
@@ -34,17 +37,17 @@ interface InputProps<T> {
 }
 
 interface LabelProps {
-  size?: Size;
+  size?: InputSize;
 }
 
 interface TextareaProps {
-  size?: Size;
+  size?: InputSize;
   color?: Color;
   fixedSize?: boolean;
 }
 
 interface SelectProps<T> {
-  size?: Size;
+  size?: InputSize;
   color?: Color;
   value?: T;
   loading?: boolean;
@@ -68,7 +71,7 @@ interface HelpProps {
 interface InputFileProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   color?: Color;
-  size?: Size;
+  size?: InputSize;
   filename?: string;
   value?: FileList;
   fullwidth?: boolean;
diff --git a/src/components/form/stories/form.story.js b/src/components/form/stories/form.story.js
index b07169bb8..d49f77841 100644
--- a/src/components/form/stories/form.story.js
+++ b/src/components/form/stories/form.story.js
@@ -164,7 +164,7 @@ LabelExample.argTypes = {
   size: {
     control: {
       type: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'normal', 'medium', 'large'],
     },
   },
 };
@@ -250,7 +250,7 @@ Field.argTypes = {
   size: {
     control: {
       type: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'normal', 'medium', 'large'],
     },
   },
 };
@@ -347,7 +347,7 @@ InputExample.argTypes = {
   size: {
     control: {
       type: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'normal', 'medium', 'large'],
     },
   },
   color: {
@@ -403,7 +403,7 @@ TextAreaExample.argTypes = {
   size: {
     control: {
       type: 'select',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['default', 'small', 'normal', 'medium', 'large'],
     },
   },
   color: {
@@ -500,7 +500,7 @@ SelectExample.argTypes = {
     defaultValue: undefined,
     control: {
       type: 'select',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['default', 'small', 'normal', 'medium', 'large'],
     },
   },
   rounded: {
@@ -622,7 +622,7 @@ InputExampleExample.argTypes = {
     defaultValue: undefined,
     control: {
       type: 'select',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['default', 'small', 'normal', 'medium', 'large'],
     },
   },
   align: {
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 947cfcfa2..fc04b3e8f 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -15,7 +15,7 @@ interface HelperProps {
   srOnly?: boolean;
 }
 
-type SpacingSize = 0 | 1 | 2 | 3 | 4 | 5 | 6 | Number | String;
+type SpacingSize = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 'auto' | Number | String;
 
 interface SpacingProps {
   m?: SpacingSize;
@@ -107,8 +107,15 @@ interface TypographyProps {
   textAlign?: 'center' | 'justify' | 'left' | 'right' | String;
   textTransform?: 'capitalized' | 'lowercase' | 'uppercase';
   textWeight?: 'light' | 'normal' | 'semibold' | 'bold';
-  textFamily?: 'sans-serif' | 'monospace' | 'primary' | 'secondary' | 'code' | String;
+  textFamily?:
+    | 'sans-serif'
+    | 'monospace'
+    | 'primary'
+    | 'secondary'
+    | 'code'
+    | String;
   italic?: boolean;
+  underline?: boolean;
 }
 
 type HTMLAttributes<K extends keyof JSX.IntrinsicElements> = OmitKeys<
diff --git a/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap b/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap
index bafecfe7d..c3c87fa95 100644
--- a/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap
+++ b/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap
@@ -6,8 +6,7 @@ exports[`Pagination component All buttons should be disabled 1`] = `
   className="pagination"
 >
   <a
-    className="pagination-previous"
-    disabled={true}
+    className="pagination-previous is-disabled"
     role="button"
     tabIndex={0}
     title="This is the first page"
@@ -15,8 +14,7 @@ exports[`Pagination component All buttons should be disabled 1`] = `
     Previous
   </a>
   <a
-    className="pagination-next"
-    disabled={true}
+    className="pagination-next is-disabled"
     role="button"
     tabIndex={0}
   >
@@ -29,8 +27,7 @@ exports[`Pagination component All buttons should be disabled 1`] = `
       <a
         aria-current="page"
         aria-label="Page 1"
-        className="pagination-link is-current"
-        disabled={true}
+        className="pagination-link is-current is-disabled"
         role="button"
         tabIndex={0}
       >
@@ -41,9 +38,7 @@ exports[`Pagination component All buttons should be disabled 1`] = `
       <a
         aria-current="page"
         aria-label="Page 2"
-        className="pagination-link"
-        disabled={true}
-        onClick={[Function]}
+        className="pagination-link is-disabled"
         role="button"
         tabIndex={0}
       >
@@ -54,9 +49,7 @@ exports[`Pagination component All buttons should be disabled 1`] = `
       <a
         aria-current="page"
         aria-label="Page 3"
-        className="pagination-link"
-        disabled={true}
-        onClick={[Function]}
+        className="pagination-link is-disabled"
         role="button"
         tabIndex={0}
       >
@@ -82,8 +75,7 @@ exports[`Pagination component Next button should be disabled 1`] = `
     Previous
   </a>
   <a
-    className="pagination-next"
-    disabled={true}
+    className="pagination-next is-disabled"
     role="button"
     tabIndex={0}
   >
@@ -139,8 +131,7 @@ exports[`Pagination component Should display first and last page number 1`] = `
   className="pagination"
 >
   <a
-    className="pagination-previous"
-    disabled={true}
+    className="pagination-previous is-disabled"
     role="button"
     tabIndex={0}
     title="This is the first page"
@@ -222,8 +213,7 @@ exports[`Pagination component Should have 3 pages and page 1 active 1`] = `
   className="pagination"
 >
   <a
-    className="pagination-previous"
-    disabled={true}
+    className="pagination-previous is-disabled"
     role="button"
     tabIndex={0}
     title="This is the first page"
@@ -295,8 +285,7 @@ exports[`Pagination component Should have 5 pages, page 5 active and display pag
     Previous
   </a>
   <a
-    className="pagination-next"
-    disabled={true}
+    className="pagination-next is-disabled"
     role="button"
     tabIndex={0}
   >
@@ -430,8 +419,7 @@ exports[`Pagination component Should not display page numbers 1`] = `
     Previous
   </a>
   <a
-    className="pagination-next"
-    disabled={true}
+    className="pagination-next is-disabled"
     role="button"
     tabIndex={0}
   >
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index 1fcdaec0f..086784f4f 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -74,9 +74,10 @@ const Pagination = ({
                     return onChange(current - 1);
                   }
             }
-            className="pagination-previous"
+            className={classnames('pagination-previous', {
+              'is-disabled': prevDisabled,
+            })}
             title="This is the first page"
-            disabled={prevDisabled}
           >
             {previous}
           </a>
@@ -90,8 +91,9 @@ const Pagination = ({
                     return onChange(current + 1);
                   }
             }
-            className="pagination-next"
-            disabled={nextDisabled}
+            className={classnames('pagination-next', {
+              'is-disabled': nextDisabled,
+            })}
           >
             {next}
           </a>
@@ -106,13 +108,18 @@ const Pagination = ({
                   <a
                     role="button"
                     tabIndex={0}
-                    className="pagination-link"
-                    onClick={() => {
-                      return onChange(1);
-                    }}
+                    className={classnames('pagination-link', {
+                      'is-disabled': disabled,
+                    })}
+                    onClick={
+                      disabled
+                        ? undefined
+                        : () => {
+                            return onChange(1);
+                          }
+                    }
                     aria-label="Page 1"
                     aria-current="page"
-                    disabled={disabled}
                   >
                     1
                   </a>
@@ -133,9 +140,10 @@ const Pagination = ({
                       tabIndex={0}
                       className={classnames('pagination-link', {
                         'is-current': current === i + firstPage,
+                        'is-disabled': disabled,
                       })}
                       onClick={
-                        current === firstPage + i
+                        disabled || current === firstPage + i
                           ? undefined
                           : () => {
                               return onChange(firstPage + i);
@@ -143,7 +151,6 @@ const Pagination = ({
                       }
                       aria-label={`Page ${i + firstPage}`}
                       aria-current="page"
-                      disabled={disabled}
                     >
                       {i + firstPage}
                     </a>
@@ -159,13 +166,18 @@ const Pagination = ({
                   <a
                     role="button"
                     tabIndex={0}
-                    className="pagination-link"
-                    onClick={() => {
-                      return onChange(total);
-                    }}
+                    className={classnames('pagination-link', {
+                      'is-disabled': disabled,
+                    })}
+                    onClick={
+                      disabled
+                        ? undefined
+                        : () => {
+                            return onChange(total);
+                          }
+                    }
                     aria-label={`Page ${total}`}
                     aria-current="page"
-                    disabled={disabled}
                   >
                     {total}
                   </a>