Button Group: Overflow

Behaviours

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

Wrapping

If you want wrapping, use the -btnGroupWrap class

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

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

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

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

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

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

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

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

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

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

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

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

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