diff --git a/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss b/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss
index 190d8e7e3..f587fe391 100644
--- a/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss
+++ b/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss
@@ -36,13 +36,8 @@ $svg-size: units(3);
// Full Width Icon Button
.usa-button--nci-icon.usa-button--nci-full-width {
- @include u-display('block');
.usa-icon {
@include u-position('absolute');
@include u-float('left');
}
- > span {
- @include u-display('inline-block');
- width: calc(100% - 48px);
- }
}
diff --git a/testing/ncids-css-testing/stories/components/usa-button/content/button.twig b/testing/ncids-css-testing/stories/components/usa-button/content/button.twig
index 0b3362ee9..ac8e20b57 100644
--- a/testing/ncids-css-testing/stories/components/usa-button/content/button.twig
+++ b/testing/ncids-css-testing/stories/components/usa-button/content/button.twig
@@ -1,8 +1,8 @@
{% macro buttonLabel(text, svg, class) %}
{% if svg and 'right' in class %}
- {{ text }} {{ svg }}
+ {{ text }}{{ svg }}
{% elseif svg %}
- {{ svg }}{{ text }}
+ {{ svg }}{{ text }}
{% else %}
{{ text }}
{% endif %}
diff --git a/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx b/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx
index afc333dd6..8a251afa6 100644
--- a/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx
+++ b/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx
@@ -11,53 +11,59 @@ export default {
const buttonStyles = [
{
title: 'Primary',
- class: 'usa-button--nci-icon',
+ class: '',
iconSvg: iconSvg,
},
{
title: 'Secondary',
- class: 'usa-button--secondary usa-button--nci-icon',
+ class: 'usa-button--secondary',
iconSvg: iconSvg,
},
{
title: 'Accent Cool',
- class: 'usa-button--accent-cool usa-button--nci-icon',
+ class: 'usa-button--accent-cool',
iconSvg: iconSvg,
},
{
title: 'Accent Warm',
- class: 'usa-button--accent-warm usa-button--nci-icon',
+ class: 'usa-button--accent-warm',
iconSvg: iconSvg,
},
{
title: 'Base',
- class: 'usa-button--base usa-button--nci-icon',
+ class: 'usa-button--base',
iconSvg: iconSvg,
},
{
title: 'Outline',
- class: 'usa-button--outline usa-button--nci-icon',
+ class: 'usa-button--outline',
iconSvg: iconSvg,
},
{
title: 'Outline Secondary',
- class: 'usa-button--outline usa-button--secondary usa-button--nci-icon',
+ class: 'usa-button--outline usa-button--secondary',
iconSvg: iconSvg,
},
{
title: 'Outline Inverse',
- class: 'usa-button--outline usa-button--inverse usa-button--nci-icon',
+ class: 'usa-button--outline usa-button--inverse',
iconSvg: iconSvg,
containerClass: 'bg-base-darkest padding-2'
},
{
title: 'Full Width',
- class: 'usa-button--nci-icon usa-button--nci-full-width',
+ class: 'usa-button--nci-full-width',
iconSvg: iconSvg,
},
{
title: 'Unstyled',
- class: 'usa-button--unstyled usa-button--nci-icon',
+ class: 'usa-button--unstyled',
+ iconSvg: iconSvg,
+ containerClass: 'ncisb-flex-gap',
+ },
+ {
+ title: 'Unstyled Full Width',
+ class: 'usa-button--unstyled usa-button--nci-full-width',
iconSvg: iconSvg,
containerClass: 'ncisb-flex-gap',
}