diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 7971c0ea8d..0a8917c3c1 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -18,6 +18,7 @@
export let newStyles = true
export let id
export let ref
+ export let reverse = false
const dispatch = createEventDispatcher()
@@ -43,6 +44,9 @@
}
}}
>
+ {#if $$slots && reverse}
+
+ {/if}
{#if icon}
{/if}
- {#if $$slots}
+ {#if $$slots && !reverse}
{/if}
@@ -93,4 +97,11 @@
.spectrum-Button--secondary.new-styles.is-disabled {
color: var(--spectrum-global-color-gray-500);
}
+ .spectrum-Button .spectrum-Button-label + .spectrum-Icon {
+ margin-left: var(--spectrum-button-primary-icon-gap);
+ margin-right: calc(
+ -1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) -
+ var(--spectrum-button-primary-padding-left-adjusted))
+ );
+ }
diff --git a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
index 12dee055e2..d7aad5ccff 100644
--- a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
+++ b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte
@@ -10,7 +10,7 @@
export let align = "left"
export let offset
export let animate
- export let secondary = false
+ export let quiet = false
let anchor
let popover
@@ -25,10 +25,13 @@
bind:ref={anchor}
{size}
icon="ChevronDown"
- cta={!secondary}
- {secondary}
+ {quiet}
+ primary={quiet}
+ cta={!quiet}
+ newStyles={!quiet}
on:click={() => popover?.show()}
on:click
+ reverse
>
{text || "Action"}
diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 1e40f326ff..371e8d46af 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -1,6 +1,6 @@