diff --git a/components/button/src/button/button.stories.js b/components/button/src/button/button.stories.js
index 704bc83ced..0fcdff9807 100644
--- a/components/button/src/button/button.stories.js
+++ b/components/button/src/button/button.stories.js
@@ -40,7 +40,7 @@ export default {
},
}
-const DemoIcon = (
+const DemoIcon24 = (
+)
+
+const DemoIcon16 = (
+
)
@@ -179,7 +193,7 @@ export const Icon = (args) => (
)
Icon.args = {
- icon: DemoIcon,
+ icon: DemoIcon24,
name: 'Icon button',
}
Icon.parameters = {
@@ -194,18 +208,33 @@ Icon.parameters = {
},
}
+export const IconOnly = Template.bind({})
+IconOnly.args = {
+ icon: DemoIcon24,
+ name: 'Icon only button',
+ children: null,
+}
+
export const IconSmall = Template.bind({})
IconSmall.args = {
- icon: DemoIcon,
+ icon: DemoIcon16,
small: true,
name: 'Icon small button',
+ children: 'Label me!',
+}
+
+export const IconOnlySmall = Template.bind({})
+IconOnlySmall.args = {
+ icon: DemoIcon16,
+ small: true,
+ name: 'Icon only small button',
children: null,
}
export const Toggled = Template.bind({})
Toggled.args = {
toggled: true,
- icon: DemoIcon,
+ icon: DemoIcon24,
name: 'Toggled button',
children: null,
}
@@ -227,7 +256,7 @@ export const ToggledDisabled = Template.bind({})
ToggledDisabled.args = {
toggled: true,
disabled: true,
- icon: DemoIcon,
+ icon: DemoIcon24,
name: 'Toggled button',
children: null,
}
@@ -244,7 +273,7 @@ Loading.args = {
name: 'Loading button',
loading: true,
children: 'Loading...',
- icon: DemoIcon,
+ icon: DemoIcon24,
}
Loading.parameters = {
docs: {
diff --git a/components/button/src/button/button.styles.js b/components/button/src/button/button.styles.js
index d17f6bb954..841de9152f 100644
--- a/components/button/src/button/button.styles.js
+++ b/components/button/src/button/button.styles.js
@@ -75,7 +75,7 @@ export default css`
.small {
height: 28px;
- padding: 0 8px;
+ padding: 0 6px;
font-size: 14px;
line-height: 16px;
}
@@ -205,7 +205,7 @@ export default css`
}
.small.icon-only {
- padding: 0 0 0 1px;
+ padding: 0 4px 0 5px;
}
.small .button-icon {
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index acd0f0eeff..c435337a46 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -147,6 +147,7 @@ Buttons are available in different sizes. Use the size that matches the usage gu
- Buttons can show only an icon.
- Icons with a text label are useful for providing more information about the action. Users scanning an interface might recognize an icon quicker than text.
- Buttons with only an icon need to show a tooltip ==link== on hover and focus that tells the user what the button action is.
+- Regular size buttons use 24px icons. Buttons size `small` use 16px icons.
### State: Disabled