Repository: codypearce/material-bread
Pull request #401 (2020-06-11 17:36:59)

MAT-51 Add density prop to buttons
<!--- The title of this PR should be a Jira issue ID and summary.  Example: `TCK-100 Add something to something` -->
Add density prop to buttons components, stories, and docs
## Issue Link
<!--- Please link to the Jira issue here or delete this section -->
https://fullstacklabs.atlassian.net/browse/MAT-51

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply -->
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed locally.

codypearce: Looks good on the web, but the text is getting cut off on iOS

![image](https://user-images.githubusercontent.com/12564956/84450563-5d65fb80-ac05-11ea-94ce-7885e794fd8d.png)


Patch:
diff --git a/dist/index.d.ts b/dist/index.d.ts
index d616794..f684d83 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -331,7 +331,7 @@ export interface BaseButtonProps {
   radius?: number
 
   fullWidth?: boolean
-  dense?: boolean
+  density?: number
 
   disabled?: boolean
   disableRipple?: boolean
diff --git a/docs/src/content/components/button/Demos/ContainedDemo.js b/docs/src/content/components/button/Demos/ContainedDemo.js
index 3735f09..18a7d89 100644
--- a/docs/src/content/components/button/Demos/ContainedDemo.js
+++ b/docs/src/content/components/button/Demos/ContainedDemo.js
@@ -7,7 +7,7 @@ export const code = `<View style={{flexDirection: 'row', alignItems: 'center', j
   <Button text={'contained'} type="contained" />
   <Button text={'Icon'} type="contained" color={'#E91E63'} icon={<Icon name="favorite" />} />
   <Button text={'Radius'} type="contained" color={'#FF5722'} radius={20} />
-  <Button text={'Dense'} type="contained" color={'#673AB7'} dense />
+  <Button text={'Density'} type="contained" color={'#673AB7'} density={-1} />
   <Button text={'Loading'} type="contained" color={'#009688'} loading />
   <Button text={'Disabled'} type="contained" disabled />
 </View>
diff --git a/docs/src/content/components/button/Demos/FlatDemo.js b/docs/src/content/components/button/Demos/FlatDemo.js
index 9fed9ca..cba2f75 100644
--- a/docs/src/content/components/button/Demos/FlatDemo.js
+++ b/docs/src/content/components/button/Demos/FlatDemo.js
@@ -7,8 +7,8 @@ export const code = `<View style={{flexDirection: 'row', alignItems: 'center', j
   <Button text={'Flat'} type="flat" />
   <Button text={'Icon'} type="flat" color={'#E91E63'} icon={<Icon name="favorite" />} />
   <Button text={'Radius'} type="flat" color={'#FF5722'} radius={20} />
-  <Button text={'Dense'} type="flat" color={'#673AB7'} dense />
-  <Button type="flat" color={'#009688'} loading />
+  <Button text={'Density'} type="flat" color={'#673AB7'} density={-1} />
+  <Button text={'Loading'} type="flat" color={'#009688'} loading />
   <Button text={'Disabled'} type="flat" disabled />
   <Button text={'Loading'} type="flat" color={'#009688'} loading />
 </View>
diff --git a/docs/src/content/components/button/Demos/IconsDemo.js b/docs/src/content/components/button/Demos/IconsDemo.js
index 771224b..46d194e 100644
--- a/docs/src/content/components/button/Demos/IconsDemo.js
+++ b/docs/src/content/components/button/Demos/IconsDemo.js
@@ -9,7 +9,7 @@ export const code = `<View style={{flexDirection: 'row', alignItems: 'center', j
     <Button text={'Archive'} type="outlined" textColor={'#673AB7'}  icon={<Icon name="archive" />} />
     <Button text={'Add'} textColor={'#009688'} icon={<Icon name="add" />}  />
     <Button text={'Notify'} type="outlined" textColor={'#E91E63'}  icon={<Icon name="notifications" />} iconPosition="right" borderSize={2}/>
-    <Button text={'Fav'}  type="flat" icon={<Icon name="favorite" />}  color={'#00BCD4'} iconPosition="right" dense/>
+    <Button text={'Fav'}  type="flat" icon={<Icon name="favorite" />}  color={'#00BCD4'} iconPosition="right" density={-1}/>
 </View>
 `;
 
diff --git a/docs/src/content/components/button/Demos/OutlinedDemo.js b/docs/src/content/components/button/Demos/OutlinedDemo.js
index 37f2523..8221120 100644
--- a/docs/src/content/components/button/Demos/OutlinedDemo.js
+++ b/docs/src/content/components/button/Demos/OutlinedDemo.js
@@ -7,7 +7,7 @@ export const code = `<View style={{flexDirection: 'row', alignItems: 'center', j
     <Button text={'Outlined'} type="outlined" />
     <Button text={'Icon'} type="outlined" textColor={'#E91E63'} borderSize={2} icon={<Icon name="favorite" />} />
     <Button text={'Radius'} type="outlined" textColor={'#FF5722'} radius={20}  />
-    <Button text={'Dense'} type="outlined" textColor={'#673AB7'} dense />
+    <Button text={'Density'} type="outlined" textColor={'#673AB7'} density={-1} />
     <Button text={'Loading'} type="outlined" textColor={'#009688'} loading />
     <Button text={'Disabled'} type="outlined" disabled  />
 </View>
diff --git a/docs/src/content/components/button/Demos/TextDemo.js b/docs/src/content/components/button/Demos/TextDemo.js
index 2846911..fad07b9 100644
--- a/docs/src/content/components/button/Demos/TextDemo.js
+++ b/docs/src/content/components/button/Demos/TextDemo.js
@@ -7,7 +7,7 @@ export const code = `<View style={{flexDirection: 'row', alignItems: 'center', j
     <Button text={'Text'} />
     <Button text={'Icon'} textColor={'#E91E63'} borderSize={2} icon={<Icon name="favorite" />} />
     <Button text={'Radius'} textColor={'#FF5722'} radius={20}  />
-    <Button text={'Dense'} ttextColor={'#673AB7'} dense  />
+    <Button text={'Density'} ttextColor={'#673AB7'} density={-1} />
     <Button text={'Loading'} textColor={'#009688'} loading  />
     <Button text={'Disabled'} disabled />
 </View>
diff --git a/docs/src/content/components/button/propData.js b/docs/src/content/components/button/propData.js
index 2ab4d69..f8ac7d8 100644
--- a/docs/src/content/components/button/propData.js
+++ b/docs/src/content/components/button/propData.js
@@ -14,7 +14,7 @@ const propData = [
   ],
   ['containerStyle', 'Styles container of the button', 'object', ''],
 
-  ['dense', 'Toggle dense type, button will be smaller', 'bool', ''],
+  ['density', 'Density scale. Supported scale values (-3, -2, -1, 0).', 'number', '0'],
   ['disabled', 'Toggle disabled styles', 'bool', ''],
   ['fullWidth', 'Forces button to to take up 100% width', 'bool', ''],
   [
diff --git a/src/Components/Button/ButtonBase/ButtonBase.js b/src/Components/Button/ButtonBase/ButtonBase.js
index a28566e..19b08fd 100644
--- a/src/Components/Button/ButtonBase/ButtonBase.js
+++ b/src/Components/Button/ButtonBase/ButtonBase.js
@@ -22,7 +22,7 @@ class ButtonBase extends Component {
     radius: PropTypes.number,
 
     fullWidth: PropTypes.bool,
-    dense: PropTypes.bool,
+    density: PropTypes.number,
 
     icon: PropTypes.node,
     iconPosition: PropTypes.string,
@@ -45,7 +45,7 @@ class ButtonBase extends Component {
 
   static defaultProps = {
     iconPosition: 'left',
-    dense: false,
+    density: 0,
     useInputCasing: false,
   };
 
@@ -55,7 +55,6 @@ class ButtonBase extends Component {
       textStyle,
       typeTextColor,
       theme,
-      dense,
       useInputCasing,
     } = this.props;
 
@@ -67,8 +66,8 @@ class ButtonBase extends Component {
           theme.buttonText,
           {
             color: typeTextColor,
-            fontSize: dense ? 13 : theme.buttonText.fontSize,
-            letterSpacing: dense ? 0.3 : theme.buttonText.letterSpacing,
+            fontSize: theme.buttonText.fontSize,
+            letterSpacing: theme.buttonText.letterSpacing,
           },
           textStyle,
         ]}>
@@ -77,7 +76,7 @@ class ButtonBase extends Component {
     );
   }
   _renderLoader() {
-    const { loading, typeTextColor, hideLabel, dense } = this.props;
+    const { loading, typeTextColor, hideLabel } = this.props;
 
     if (!loading) return null;
     return (
@@ -85,7 +84,7 @@ class ButtonBase extends Component {
         size="small"
         color={typeTextColor}
         style={{
-          width: dense ? 12 : 16,
+          width: 18,
           flexDirection: 'row',
           alignItems: 'center',
           alignSelf: 'center',
@@ -96,14 +95,8 @@ class ButtonBase extends Component {
     );
   }
   _renderIcon() {
-    const {
-      icon,
-      iconPosition,
-      iconSize,
-      typeTextColor,
-      loading,
-      dense,
-    } = this.props;
+    const { icon, iconPosition, iconSize, typeTextColor, loading } = this.props;
+
     if (loading) {
       return this._renderLoader();
     }
@@ -113,13 +106,23 @@ class ButtonBase extends Component {
           marginRight: iconPosition == 'left' ? 12 : 0,
           marginLeft: iconPosition == 'right' ? 12 : 0,
         },
-        size: iconSize || (dense ? 14 : 18),
+        size: iconSize || 18,
         color: typeTextColor ? typeTextColor : 'white',
       });
     }
     return null;
   }
 
+  getDensityHeight() {
+    const { theme, density } = this.props;
+    let densityHeight = theme.button.height;
+
+    if (density <= -1) {
+      densityHeight = Math.max(24, densityHeight + 4 * density);
+    }
+    return densityHeight;
+  }
+
   render() {
     const {
       disabled,
@@ -131,7 +134,6 @@ class ButtonBase extends Component {
       typeButtonStyles,
       fullWidth,
       typeRippleColor,
-      dense,
       style,
       onPressIn,
       onPressOut,
@@ -143,6 +145,7 @@ class ButtonBase extends Component {
       ...props
     } = this.props;
 
+    let densityHeight = this.getDensityHeight();
     return (
       <Ripple
         onPress={onPress}
@@ -158,11 +161,11 @@ class ButtonBase extends Component {
             justifyContent: 'center',
             flexDirection: hideLabel ? 'column' : 'row',
             width: fullWidth ? '100%' : 'auto',
-            minWidth: dense ? 'auto' : 64,
-            height: dense ? 32 : 36,
-            minHeight: dense ? 32 : 36,
-            paddingLeft: iconPosition === 'left' && icon ? 18 : 16,
-            paddingRight: iconPosition === 'right' && icon ? 18 : 16,
+            minWidth: 64,
+            height: densityHeight,
+            minHeight: densityHeight,
+            paddingLeft: iconPosition === 'left' && icon ? 12 : 16,
+            paddingRight: iconPosition === 'right' && icon ? 12 : 16,
             borderRadius: radius ? radius : theme.button.borderRadius,
           },
           typeButtonStyles,
diff --git a/src/Components/Button/ContainedButton/ContainedButton.stories.js b/src/Components/Button/ContainedButton/ContainedButton.stories.js
index e0d8575..798d85a 100644
--- a/src/Components/Button/ContainedButton/ContainedButton.stories.js
+++ b/src/Components/Button/ContainedButton/ContainedButton.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { storiesOf } from '../../../storybook/helpers/storiesOf';
 
-import { Button, Icon } from '../../..';
+import { Button, Icon, BodyText } from '../../..';
 import Header from '../../../storybook/components/Header';
 import Container from '../../../storybook/components/Container';
 
@@ -58,7 +58,7 @@ export default storiesOf('Components|Buttons/Contained Button', module)
         <Button
           text={'Buy'}
           color={'#673AB7'}
-          dense
+          density={-2}
           icon={<Icon name="attach-money" />}
           type="contained"
         />
@@ -153,7 +153,7 @@ export default storiesOf('Components|Buttons/Contained Button', module)
         <Button
           text={'Buy'}
           tcolor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           icon={<Icon name="attach-money" />}
           type="contained"
@@ -168,38 +168,39 @@ export default storiesOf('Components|Buttons/Contained Button', module)
       </View>
     </Container>
   ))
-  .add('dense', () => (
+  .add('density', () => (
     <Container>
       <Header title={'Dense Contained Button'} />
 
+      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
           flexWrap: 'wrap',
-          marginBottom: 20,
+          marginBottom: 30,
         }}>
-        <Button text={'Home'} dense type="contained" />
+        <Button text={'Home'} density={-1} type="contained" />
         <Button
           text={'Favorite'}
           color={'#E91E63'}
           borderSize={2}
-          dense
+          density={-1}
           type="contained"
           icon={<Icon name="favorite" />}
         />
         <Button
           text={'Settings'}
           color={'#FF5722'}
-          dense
+          density={-1}
           radius={60}
           type="contained"
         />
         <Button
           text={'Buy'}
           tcolor={'#673AB7'}
-          dense
+          density={-1}
           radius={0}
           type="contained"
           icon={<Icon name="attach-money" />}
@@ -207,7 +208,91 @@ export default storiesOf('Components|Buttons/Contained Button', module)
         <Button
           text={'Archive'}
           color={'#009688'}
-          dense
+          density={-1}
+          icon={<Icon name="archive" />}
+          type="contained"
+        />
+      </View>
+
+      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-2} type="contained" />
+        <Button
+          text={'Favorite'}
+          color={'#E91E63'}
+          borderSize={2}
+          density={-2}
+          type="contained"
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          color={'#FF5722'}
+          density={-2}
+          radius={60}
+          type="contained"
+        />
+        <Button
+          text={'Buy'}
+          tcolor={'#673AB7'}
+          density={-2}
+          radius={0}
+          type="contained"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          color={'#009688'}
+          density={-2}
+          icon={<Icon name="archive" />}
+          type="contained"
+        />
+      </View>
+
+      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-3} type="contained" />
+        <Button
+          text={'Favorite'}
+          color={'#E91E63'}
+          borderSize={2}
+          density={-3}
+          type="contained"
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          color={'#FF5722'}
+          density={-3}
+          radius={60}
+          type="contained"
+        />
+        <Button
+          text={'Buy'}
+          tcolor={'#673AB7'}
+          density={-3}
+          radius={0}
+          type="contained"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          color={'#009688'}
+          density={-3}
           icon={<Icon name="archive" />}
           type="contained"
         />
@@ -237,6 +322,23 @@ export default storiesOf('Components|Buttons/Contained Button', module)
         <Button color={'#FF5722'} loading radius={60} type="contained" />
         <Button tcolor={'#673AB7'} dense radius={0} loading type="contained" />
         <Button
+          text={'Settings'}
+          color={'#FF5722'}
+          loading
+          radius={60}
+          type="contained"
+        />
+        <Button
+          text={'Buy'}
+          tcolor={'#673AB7'}
+          density={-2}
+          radius={0}
+          loading
+          type="contained"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
           color={'#009688'}
           loading
           type="contained"
@@ -275,7 +377,7 @@ export default storiesOf('Components|Buttons/Contained Button', module)
         <Button
           text={'Buy'}
           tcolor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           disabled
           type="contained"
diff --git a/src/Components/Button/FlatButton/FlatButton.stories.js b/src/Components/Button/FlatButton/FlatButton.stories.js
index 6e2ee54..97e5362 100644
--- a/src/Components/Button/FlatButton/FlatButton.stories.js
+++ b/src/Components/Button/FlatButton/FlatButton.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { storiesOf } from '../../../storybook/helpers/storiesOf';
 
-import { Button, Icon } from '../../..';
+import { Button, Icon, BodyText } from '../../..';
 import Header from '../../../storybook/components/Header';
 import Container from '../../../storybook/components/Container';
 
@@ -58,7 +58,7 @@ export default storiesOf('Components|Buttons/Flat Button', module)
         <Button
           text={'Buy'}
           color={'#673AB7'}
-          dense
+          density={-2}
           icon={<Icon name="attach-money" />}
           type="flat"
         />
@@ -148,7 +148,7 @@ export default storiesOf('Components|Buttons/Flat Button', module)
         <Button
           text={'Buy'}
           tcolor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           icon={<Icon name="attach-money" />}
           type="flat"
@@ -163,38 +163,39 @@ export default storiesOf('Components|Buttons/Flat Button', module)
       </View>
     </Container>
   ))
-  .add('dense', () => (
+  .add('density', () => (
     <Container>
       <Header title={'Dense Flat Button'} />
 
+      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
           flexWrap: 'wrap',
-          marginBottom: 20,
+          marginBottom: 30,
         }}>
-        <Button text={'Home'} dense type="flat" />
+        <Button text={'Home'} density={-1} type="flat" />
         <Button
           text={'Favorite'}
           color={'#E91E63'}
           borderSize={2}
-          dense
+          density={-1}
           type="flat"
           icon={<Icon name="favorite" />}
         />
         <Button
           text={'Settings'}
           color={'#FF5722'}
-          dense
+          density={-1}
           radius={60}
           type="flat"
         />
         <Button
           text={'Buy'}
           tcolor={'#673AB7'}
-          dense
+          density={-1}
           radius={0}
           type="flat"
           icon={<Icon name="attach-money" />}
@@ -202,7 +203,91 @@ export default storiesOf('Components|Buttons/Flat Button', module)
         <Button
           text={'Archive'}
           color={'#009688'}
-          dense
+          density={-1}
+          icon={<Icon name="archive" />}
+          type="flat"
+        />
+      </View>
+
+      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-2} type="flat" />
+        <Button
+          text={'Favorite'}
+          color={'#E91E63'}
+          borderSize={2}
+          density={-2}
+          type="flat"
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          color={'#FF5722'}
+          density={-2}
+          radius={60}
+          type="flat"
+        />
+        <Button
+          text={'Buy'}
+          tcolor={'#673AB7'}
+          density={-2}
+          radius={0}
+          type="flat"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          color={'#009688'}
+          density={-2}
+          icon={<Icon name="archive" />}
+          type="flat"
+        />
+      </View>
+
+      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-3} type="flat" />
+        <Button
+          text={'Favorite'}
+          color={'#E91E63'}
+          borderSize={2}
+          density={-3}
+          type="flat"
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          color={'#FF5722'}
+          density={-3}
+          radius={60}
+          type="flat"
+        />
+        <Button
+          text={'Buy'}
+          tcolor={'#673AB7'}
+          density={-3}
+          radius={0}
+          type="flat"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          color={'#009688'}
+          density={-3}
           icon={<Icon name="archive" />}
           type="flat"
         />
@@ -221,11 +306,38 @@ export default storiesOf('Components|Buttons/Flat Button', module)
           flexWrap: 'wrap',
           marginBottom: 20,
         }}>
-        <Button loading type="flat" />
-        <Button color={'#E91E63'} borderSize={2} loading type="flat" />
-        <Button color={'#FF5722'} loading radius={60} type="flat" />
-        <Button tcolor={'#673AB7'} dense radius={0} loading type="flat" />
-        <Button color={'#009688'} loading type="flat" />
+        <Button text={'Home'} loading type="flat" />
+        <Button
+          text={'Favorite'}
+          color={'#E91E63'}
+          borderSize={2}
+          loading
+          type="flat"
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          color={'#FF5722'}
+          loading
+          radius={60}
+          type="flat"
+        />
+        <Button
+          text={'Buy'}
+          tcolor={'#673AB7'}
+          density={-2}
+          radius={0}
+          loading
+          type="flat"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          color={'#009688'}
+          loading
+          type="flat"
+          icon={<Icon name="archive" />}
+        />
       </View>
     </Container>
   ))
@@ -258,7 +370,7 @@ export default storiesOf('Components|Buttons/Flat Button', module)
         <Button
           text={'Buy'}
           tcolor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           disabled
           type="flat"
diff --git a/src/Components/Button/OutlinedButton/OutlinedButton.stories.js b/src/Components/Button/OutlinedButton/OutlinedButton.stories.js
index 35f795c..0bb3782 100644
--- a/src/Components/Button/OutlinedButton/OutlinedButton.stories.js
+++ b/src/Components/Button/OutlinedButton/OutlinedButton.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { storiesOf } from '../../../storybook/helpers/storiesOf';
 
-import { Button, Icon } from '../../..';
+import { Button, Icon, BodyText } from '../../..';
 import Header from '../../../storybook/components/Header';
 import Container from '../../../storybook/components/Container';
 
@@ -58,7 +58,7 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
         <Button
           text={'Buy'}
           textColor={'#673AB7'}
-          dense
+          density={-2}
           icon={<Icon name="attach-money" />}
           type="outlined"
         />
@@ -153,7 +153,7 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           icon={<Icon name="attach-money" />}
           type="outlined"
@@ -168,38 +168,39 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
       </View>
     </Container>
   ))
-  .add('dense', () => (
+  .add('density', () => (
     <Container>
       <Header title={'Dense Outlined Button'} />
 
+      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
           flexWrap: 'wrap',
-          marginBottom: 20,
+          marginBottom: 30,
         }}>
-        <Button text={'Home'} dense type="outlined" />
+        <Button text={'Home'} density={-1} type="outlined" />
         <Button
           text={'Favorite'}
           textColor={'#E91E63'}
           borderSize={2}
-          dense
+          density={-1}
           type="outlined"
           icon={<Icon name="favorite" />}
         />
         <Button
           text={'Settings'}
           textColor={'#FF5722'}
-          dense
+          density={-1}
           radius={60}
           type="outlined"
         />
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-1}
           radius={0}
           type="outlined"
           icon={<Icon name="attach-money" />}
@@ -207,7 +208,91 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
         <Button
           text={'Archive'}
           textColor={'#009688'}
-          dense
+          density={-1}
+          icon={<Icon name="archive" />}
+          type="outlined"
+        />
+      </View>
+
+      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-2} type="outlined" />
+        <Button
+          text={'Favorite'}
+          textColor={'#E91E63'}
+          borderSize={2}
+          density={-2}
+          type="outlined"
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          textColor={'#FF5722'}
+          density={-2}
+          radius={60}
+          type="outlined"
+        />
+        <Button
+          text={'Buy'}
+          ttextColor={'#673AB7'}
+          density={-2}
+          radius={0}
+          type="outlined"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          textColor={'#009688'}
+          density={-2}
+          icon={<Icon name="archive" />}
+          type="outlined"
+        />
+      </View>
+
+      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-3} type="outlined" />
+        <Button
+          text={'Favorite'}
+          textColor={'#E91E63'}
+          borderSize={2}
+          density={-3}
+          type="outlined"
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          textColor={'#FF5722'}
+          density={-3}
+          radius={60}
+          type="outlined"
+        />
+        <Button
+          text={'Buy'}
+          ttextColor={'#673AB7'}
+          density={-3}
+          radius={0}
+          type="outlined"
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          textColor={'#009688'}
+          density={-3}
           icon={<Icon name="archive" />}
           type="outlined"
         />
@@ -231,7 +316,7 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
         <Button textColor={'#FF5722'} loading radius={60} type="outlined" />
         <Button
           ttextColor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           loading
           type="outlined"
@@ -270,7 +355,7 @@ export default storiesOf('Components|Buttons/Outlined Button', module)
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           disabled
           type="outlined"
diff --git a/src/Components/Button/TextButton/TextButton.stories.js b/src/Components/Button/TextButton/TextButton.stories.js
index 32bf929..9326ea8 100644
--- a/src/Components/Button/TextButton/TextButton.stories.js
+++ b/src/Components/Button/TextButton/TextButton.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { storiesOf } from '../../../storybook/helpers/storiesOf';
 
-import { Button, Icon } from '../../..';
+import { Button, Icon, BodyText } from '../../..';
 import Header from '../../../storybook/components/Header';
 import Container from '../../../storybook/components/Container';
 
@@ -56,7 +56,7 @@ export default storiesOf('Components|Buttons/Text Button', module)
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-2}
           icon={<Icon name="attach-money" />}
         />
         <Button
@@ -138,7 +138,7 @@ export default storiesOf('Components|Buttons/Text Button', module)
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           icon={<Icon name="attach-money" />}
         />
@@ -151,38 +151,120 @@ export default storiesOf('Components|Buttons/Text Button', module)
       </View>
     </Container>
   ))
-  .add('dense', () => (
+  .add('density', () => (
     <Container>
       <Header title={'Dense Text Button'} />
 
+      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
           flexWrap: 'wrap',
-          marginBottom: 20,
+          marginBottom: 30,
         }}>
-        <Button text={'Home'} dense />
+        <Button text={'Home'} density={-1} />
         <Button
           text={'Favorite'}
           textColor={'#E91E63'}
           borderSize={2}
-          dense
+          density={-1}
           icon={<Icon name="favorite" />}
         />
-        <Button text={'Settings'} textColor={'#FF5722'} dense radius={60} />
+        <Button
+          text={'Settings'}
+          textColor={'#FF5722'}
+          density={-1}
+          radius={60}
+        />
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-1}
           radius={0}
           icon={<Icon name="attach-money" />}
         />
         <Button
           text={'Archive'}
           textColor={'#009688'}
-          dense
+          density={-1}
+          icon={<Icon name="archive" />}
+        />
+      </View>
+
+      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-2} />
+        <Button
+          text={'Favorite'}
+          textColor={'#E91E63'}
+          borderSize={2}
+          density={-2}
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          textColor={'#FF5722'}
+          density={-2}
+          radius={60}
+        />
+        <Button
+          text={'Buy'}
+          ttextColor={'#673AB7'}
+          density={-2}
+          radius={0}
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          textColor={'#009688'}
+          density={-2}
+          icon={<Icon name="archive" />}
+        />
+      </View>
+
+      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: 30,
+        }}>
+        <Button text={'Home'} density={-3} />
+        <Button
+          text={'Favorite'}
+          textColor={'#E91E63'}
+          borderSize={2}
+          density={-3}
+          icon={<Icon name="favorite" />}
+        />
+        <Button
+          text={'Settings'}
+          textColor={'#FF5722'}
+          density={-3}
+          radius={60}
+        />
+        <Button
+          text={'Buy'}
+          ttextColor={'#673AB7'}
+          density={-3}
+          radius={0}
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          textColor={'#009688'}
+          density={-3}
           icon={<Icon name="archive" />}
         />
       </View>
@@ -200,12 +282,30 @@ export default storiesOf('Components|Buttons/Text Button', module)
           flexWrap: 'wrap',
           marginBottom: 20,
         }}>
-        <Button loading />
-        <Button textColor={'#E91E63'} borderSize={2} loading />
-        <Button textColor={'#FF5722'} loading radius={60} />
-        <Button ttextColor={'#673AB7'} dense radius={0} loading />
-        <Button textColor={'#009688'} loading />
-      </View>
+        <Button text={'Home'} loading />
+        <Button
+          text={'Favorite'}
+          textColor={'#E91E63'}
+          borderSize={2}
+          loading
+          icon={<Icon name="favorite" />}
+        />
+        <Button text={'Settings'} textColor={'#FF5722'} loading radius={60} />
+        <Button
+          text={'Buy'}
+          ttextColor={'#673AB7'}
+          density={-2}
+          radius={0}
+          loading
+          icon={<Icon name="attach-money" />}
+        />
+        <Button
+          text={'Archive'}
+          textColor={'#009688'}
+          loading
+          icon={<Icon name="archive" />}
+        />
+
     </Container>
   ))
   .add('disabled', () => (
@@ -226,7 +326,7 @@ export default storiesOf('Components|Buttons/Text Button', module)
         <Button
           text={'Buy'}
           ttextColor={'#673AB7'}
-          dense
+          density={-2}
           radius={0}
           disabled
           icon={<Icon name="attach-money" />}
diff --git a/src/Theme/defaultTheme.js b/src/Theme/defaultTheme.js
index 174ae7e..ec514c2 100644
--- a/src/Theme/defaultTheme.js
+++ b/src/Theme/defaultTheme.js
@@ -94,13 +94,12 @@ export default {
     size: 20,
   },
   button: {
-    paddingHorizontal: 8,
-    paddingVertical: 10,
     borderRadius: 3,
     alignItems: 'center',
     textAlign: 'center',
     letterSpacing: 1.25,
     textTransform: 'uppercase',
+    height: 36,
     fontSize: 14,
     fontWeight: '500',
     lineHeight: 16,
diff --git a/src/index.d.ts b/src/index.d.ts
index d616794..701de8a 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -331,7 +331,7 @@ export interface BaseButtonProps {
   radius?: number
 
   fullWidth?: boolean
-  dense?: boolean
+  density?: boolean
 
   disabled?: boolean
   disableRipple?: boolean


Test patch:
diff --git a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
index 817b91a..0279dc0 100644
--- a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
+++ b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -70,10 +70,9 @@ exports[`TextFieldFilled Renders 1`] = `
           "display": "flex",
           "fontSize": 14,
           "fontWeight": "500",
+          "height": 36,
           "letterSpacing": 1.25,
           "lineHeight": 16,
-          "paddingHorizontal": 8,
-          "paddingVertical": 10,
           "textAlign": "center",
           "textTransform": "uppercase",
         },
diff --git a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
index b19fa84..a8f1c9d 100644
--- a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
+++ b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -69,10 +69,9 @@ exports[`TextFieldFlat Renders 1`] = `
           "display": "flex",
           "fontSize": 14,
           "fontWeight": "500",
+          "height": 36,
           "letterSpacing": 1.25,
           "lineHeight": 16,
-          "paddingHorizontal": 8,
-          "paddingVertical": 10,
           "textAlign": "center",
           "textTransform": "uppercase",
         },
diff --git a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
index 3c1ce7f..151f7c5 100644
--- a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
+++ b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
@@ -69,10 +69,9 @@ exports[`TextFieldOutline Renders 1`] = `
           "display": "flex",
           "fontSize": 14,
           "fontWeight": "500",
+          "height": 36,
           "letterSpacing": 1.25,
           "lineHeight": 16,
-          "paddingHorizontal": 8,
-          "paddingVertical": 10,
           "textAlign": "center",
           "textTransform": "uppercase",
         },