Button Group: Overflow

Behaviours

If overflow scroll is wanted the button group needs to be wrapped in an overflow nav component

<div data-sds-gradient-overflow-h>
    <div data-sds-gradient-overflow-h-wrapper>
        <div data-sds-gradient-overflow-h-inner>
            <div class="sds-btnGroup">
                <button type="button" class="sds-btn -btnSecondary">

                    <span class="sds-btn__text">button text</span>

                </button>
                <button type="button" class="sds-btn -btnSecondary">

                    <span class="sds-btn__text">button text</span>

                </button>
                <button type="button" class="sds-btn -btnSecondary">

                    <span class="sds-btn__text">button text</span>

                </button>
                <button type="button" class="sds-btn -btnSecondary">

                    <span class="sds-btn__text">button text</span>

                </button>
                <button type="button" class="sds-btn -btnSecondary">

                    <span class="sds-btn__text">button text</span>

                </button>
                <button type="button" class="sds-btn -btnSecondary">

                    <span class="sds-btn__text">button text</span>

                </button>
            </div>
        </div>
    </div>
</div>
 
<div data-{{ namespace }}gradient-overflow-h>
	<div data-{{ namespace }}gradient-overflow-h-wrapper>
		<div data-{{ namespace }}gradient-overflow-h-inner>
			<div class="{{ namespace }}btnGroup{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
				{% render "@btn-secondary" %}
				{% render "@btn-secondary" %}
				{% render "@btn-secondary" %}
				{% render "@btn-secondary" %}
				{% render "@btn-secondary" %}
				{% render "@btn-secondary" %}
			</div>
		</div>
	</div>
</div>