, useTestValues = false) =>
${chips} ${pagination} ${slider}
- ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress}
- ${handle} ${textArea} ${popover} ${tile} ${tooltip}
+ ${datePicker} ${tabs} ${label} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail}
+ ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
${alert} ${navigation}
@@ -142,6 +143,7 @@ const componentTokens = {
...chipTokens,
...checkboxTokens,
...handleTokens,
+ ...labelTokens,
...popoverTokens,
...progressTokens,
...inputTokens,
diff --git a/packages/calcite-components/src/custom-theme/label.ts b/packages/calcite-components/src/custom-theme/label.ts
new file mode 100644
index 00000000000..fb0070c3ae1
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/label.ts
@@ -0,0 +1,13 @@
+import { html } from "../../support/formatting";
+
+export const labelTokens = {
+ calciteLabelMarginBottom: "",
+ calciteLabelTextColor: "",
+};
+
+export const label = html`
+
+ Label text
+
+
+`;
diff --git a/packages/calcite-components/src/demos/label.html b/packages/calcite-components/src/demos/label.html
index db11d95668c..9e22fbf25cf 100644
--- a/packages/calcite-components/src/demos/label.html
+++ b/packages/calcite-components/src/demos/label.html
@@ -309,6 +309,21 @@
+
+