Outline-inverse<div class="bg-base-darkest text-base-lightest padding-4">
    <div class="grid-row">
        <div class="grid-col">
            <div class="padding-y-2">
                <div class="text-center">Outline-inverse<br><br>

                    <button class="usa-button sds-button--circle usa-button--outline usa-button--inverse">
                        <i class="sds text-ink bi-plus size-2x" aria-hidden="true" title="Screen reader description"></i>
                        <span class="sr-only"></span>

                    </button>
                </div>
            </div>
        </div>
        <div class="grid-col">
            <div class="grid-row">
                <div class="grid-col padding-2">
                    <div class="text-center">Hover<br><br>
                        <button class="usa-button sds-button--circle usa-button--outline usa-button--inverse usa-button--hover">
                            <i class="sds text-ink bi-plus size-2x" aria-hidden="true" title="Screen reader description"></i>
                            <span class="sr-only"></span>

                        </button>
                    </div>
                </div>
                <div class="grid-col padding-2">
                    <div class="text-center">Active<br><br>
                        <button class="usa-button sds-button--circle usa-button--outline usa-button--inverse usa-button--active">
                            <i class="sds text-ink bi-plus size-2x" aria-hidden="true" title="Screen reader description"></i>
                            <span class="sr-only"></span>

                        </button>
                    </div>
                </div>
                <div class="grid-col padding-2">
                    <div class="text-center">Focused<br><br>
                        <button class="usa-button sds-button--circle usa-button--outline usa-button--inverse usa-focus">
                            <i class="sds text-ink bi-plus size-2x" aria-hidden="true" title="Screen reader description"></i>
                            <span class="sr-only"></span>

                        </button>
                    </div>
                </div>
                <div class="grid-col padding-2">
                    <div class="text-center">Disabled<br><br>
                        <button class="usa-button sds-button--circle usa-button--outline usa-button--inverse usa-button--disabled">
                            <i class="sds text-ink bi-plus size-2x" aria-hidden="true" title="Screen reader description"></i>
                            <span class="sr-only"></span>

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>