diff --git a/packages/web-components/src/toolbar/fixtures/toolbar.html b/packages/web-components/src/toolbar/fixtures/toolbar.html
index fd9f2dd75a1348..26f45494f2e73b 100644
--- a/packages/web-components/src/toolbar/fixtures/toolbar.html
+++ b/packages/web-components/src/toolbar/fixtures/toolbar.html
@@ -9,7 +9,12 @@
@@ -133,9 +138,9 @@
Slotted End Items w/ Min Width
-Toolbar with slotted label
+Toolbar with slotted span label
-
+ Span Label
@@ -158,6 +163,7 @@ Toolbar with invisible label
Vertical orientation
+ Span Label
@@ -195,6 +201,7 @@ Disabled Elements
+ Span Label
One
Two
Three
diff --git a/packages/web-components/src/toolbar/toolbar.styles.ts b/packages/web-components/src/toolbar/toolbar.styles.ts
index d38db7282e942a..48acb6c3862d86 100644
--- a/packages/web-components/src/toolbar/toolbar.styles.ts
+++ b/packages/web-components/src/toolbar/toolbar.styles.ts
@@ -29,6 +29,7 @@ export const toolbarStyles: (
fill: currentcolor;
padding: var(--toolbar-item-gap);
box-sizing: border-box;
+ align-items: center;
}
:host(${focusVisible}) {
@@ -57,6 +58,11 @@ export const toolbarStyles: (
margin: var(--toolbar-item-gap) 0;
}
+ :host([orientation="vertical"]) {
+ display: inline-flex;
+ flex-direction: column;
+ }
+
.start,
.end {
display: flex;