diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4d48fe7a..144187220 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- editor is focused on load if `autoFocus` prop is set to `true`
- implemented support for `disabled` state in code editor
- implemented support for `intent` states in code editor
+- `Label` component
+ - added `additionalElements` property to display elements at the end of the label
## [24.0.1] - 2025-02-06
diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
index 2c1eeba1b..c6a30f206 100644
--- a/src/components/Label/Label.stories.tsx
+++ b/src/components/Label/Label.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
import { loremIpsum } from "react-lorem-ipsum";
import { Meta, StoryFn } from "@storybook/react";
-import { Label } from "../../index";
+import { Icon, Label } from "../../index";
export default {
title: "Forms/Label",
@@ -19,4 +19,5 @@ Default.args = {
tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
disabled: false,
htmlFor: "inputid",
+ additionalElements: ,
};
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 880678c34..790bc6817 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import Icon from "../Icon/Icon";
+import Spacing from "../Separation/Spacing";
import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
export interface LabelProps extends React.LabelHTMLAttributes {
@@ -34,6 +35,10 @@ export interface LabelProps extends React.LabelHTMLAttributes
* visual appearance of the label
*/
emphasis?: "strong" | "normal";
+ /**
+ * Add other elements to the end of the label content
+ */
+ additionalElements?: React.ReactNode | React.ReactNode[];
}
export const Label = ({
@@ -46,6 +51,7 @@ export const Label = ({
tooltipProps,
isLayoutForElement = "label",
emphasis = "normal",
+ additionalElements,
...otherLabelProps
}: LabelProps) => {
let htmlElementstring = isLayoutForElement;
@@ -63,10 +69,16 @@ export const Label = ({
)}
{children && {children}}
+ {additionalElements && (
+ <>
+
+ {additionalElements}
+ >
+ )}
>
);
- return !!text || !!info || !!tooltip || !!children ? (
+ return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (
React.createElement(
htmlElementstring,
{