Replace Label component usage with a valid alternative across the documentations. (#4719)

HerbertsVaadin · web-flow · commit 6abf20cbcfc3 · 2025-11-03T10:38:53.000+02:00
diff --git a/articles/flow/binding-data/components-binder-validation.adoc b/articles/flow/binding-data/components-binder-validation.adoc
@@ -59,15 +59,15 @@ binder.forField(titleField)
 
 === Custom Validation Error Messages
 
-You can customize the way error messages are displayed by defining a [classname]`ValidationStatusHandler`. Or you can do so by configuring the [classname]`Label` for each binding.
+You can customize the way error messages are displayed by defining a [classname]`ValidationStatusHandler`. Or you can do so by configuring a status label component for each binding.
 
-The label is used to show the status of the field. It can be used for validation errors, as well as confirmation and helper messages.
+The status label is used to show the status of the field. It can be used for validation errors, as well as confirmation and helper messages.
 
 The example below shows how to configure validation messages for email and minimum-length validation:
 
 [source,java]
 ----
-Label emailStatus = new Label();
+Span emailStatus = new Span();
 emailStatus.getStyle().set("color", "Red");
 binder.forField(emailField)
     .withValidator(new EmailValidator(
@@ -77,7 +77,7 @@ binder.forField(emailField)
     .withStatusLabel(emailStatus)
     .bind(Person::getEmail, Person::setEmail);
 
-Label nameStatus = new Label();
+Span nameStatus = new Span();
 
 binder.forField(nameField)
     // Define the validator
@@ -94,9 +94,9 @@ binder.forField(nameField)
     .bind(Person::getName, Person::setName);
 ----
 
-The [methodname]`withStatusLabel(Label label)` method sets the given label to show an error message if the validation fails.
+The [methodname]`withStatusLabel(HasText label)` method sets the given component to show an error message if the validation fails.
 
-As an alternative to using labels, you can set a custom validation status handler, using the [methodname]`withValidationStatusHandler()` method. This allows you to customize how the binder displays error messages. It's also more flexible than using the status label approach.
+As an alternative to using status labels, you can set a custom validation status handler, using the [methodname]`withValidationStatusHandler()` method. This allows you to customize how the binder displays error messages. It's also more flexible than using the status label approach.
 
 
 === Multiple Validators
diff --git a/articles/flow/binding-data/components-binder.adoc b/articles/flow/binding-data/components-binder.adoc
@@ -127,10 +127,10 @@ To bind components that don't implement the [interfacename]`HasValue` interface
 
 [source,java]
 ----
-Label fullNameLabel = new Label();
+Span fullNameSpan = new Span();
 ReadOnlyHasValue<String> fullName =
         new ReadOnlyHasValue<>(
-            text -> fullNameLabel.setText(text));
+            text -> fullNameSpan.setText(text));
 binder.forField(fullName)
         .bind(Person::getFullName, null);
 ----
diff --git a/articles/flow/create-ui/creating-components/composite.adoc b/articles/flow/create-ui/creating-components/composite.adoc
@@ -11,10 +11,10 @@ order: 5
 
 This section demonstrates how to create a `Composite` component using existing components.
 
-The example creates a `TextField` component by combining existing `Div`, `Label` and `Input` HTML components into this hierarchy:
+The example creates a `TextField` component by combining existing `Div`, `NativeLabel` and `Input` HTML components into this hierarchy:
 
 * `Div`
-** `Label`
+** `NativeLabel`
 ** `Input`
 
 .Create the component based on a Composite
@@ -27,11 +27,11 @@ It's possible to create a new component by extending the `Div` HTML component, b
 ----
 public class TextField extends Composite<Div> {
 
-    private Label label;
+    private NativeLabel label;
     private Input input;
 
     public TextField(String labelText, String value) {
-        label = new Label();
+        label = new NativeLabel();
         label.setText(labelText);
         input = new Input();
         input.setValue(value);
@@ -49,7 +49,7 @@ public class TextField extends Composite<Div> {
 == Adding an API
 
 To make the component easier to use, you can add an API to get and set the value and label text.
-You do this by delegating to the `Input` and `Label` components.
+You do this by delegating to the `Input` and `NativeLabel` components.
 
 *Example*: Adding an API to get and set the value and label.
 
diff --git a/articles/flow/create-ui/element-api/shadow-root.adoc b/articles/flow/create-ui/element-api/shadow-root.adoc
@@ -39,8 +39,8 @@ public class MyLabel extends Component {
     public MyLabel() {
         ShadowRoot shadowRoot = getElement()
                 .attachShadow();
-        Label textLabel = new Label("In the shadow");
-        shadowRoot.appendChild(textLabel.getElement());
+        Span textSpan = new Span("In the shadow");
+        shadowRoot.appendChild(textSpan.getElement());
     }
 }
 ----
diff --git a/articles/flow/create-ui/templates/components.adoc b/articles/flow/create-ui/templates/components.adoc
@@ -79,7 +79,7 @@ The `@Id` annotation can also be used to inject an [classname]`Element` instance
 [source,java]
 ----
 MainPage page = new MainPage();
-page.setContent(new Label("Hello!"));
+page.setContent(new Span("Hello!"));
 ----
 
 
diff --git a/articles/flow/integrations/cdi/instantiated-beans.adoc b/articles/flow/integrations/cdi/instantiated-beans.adoc
@@ -61,7 +61,7 @@ public class TestTemplate
 ----
 @Dependent
 @Tag("dependent-label")
-public class DependentLabel extends Label {
+public class DependentLabel extends Span {
     @Inject
     private Greeter greeter;
 
diff --git a/articles/flow/routing/exceptions.adoc b/articles/flow/routing/exceptions.adoc
@@ -223,7 +223,7 @@ public class FaultyBlogPostHandler extends Component
     public int setErrorParameter(BeforeEnterEvent event,
             ErrorParameter<IllegalArgumentException>
                     parameter) {
-        Label message = new Label(
+        Span message = new Span(
                 parameter.getCustomMessage());
         getElement().appendChild(message.getElement());
 
diff --git a/articles/tools/mpr/configuration/limitations.adoc b/articles/tools/mpr/configuration/limitations.adoc
@@ -131,7 +131,7 @@ Legacy component events don't work unless you disable server-side modality of th
 ----
         Dialog dialog = new Dialog();
         dialog.setHeaderTitle("Dialog");
-        dialog.add(new Label("Hello"));
+        dialog.add(new Span("Hello"));
         // Using legacy button
         LegacyWrapper wrapper = new LegacyWrapper(new Button("Close", e -> {
             dialog.close();
diff --git a/articles/tools/mpr/introduction/3-spring-boot.adoc b/articles/tools/mpr/introduction/3-spring-boot.adoc
@@ -100,8 +100,8 @@ public class HelpView extends VerticalLayout implements View {
        HelpService service = context.getBean(HelpService.class);
        // every time when {@code context.getBean(HelpService.class)} called
        // the HelpService instance is the same until we're inside HelpView/HelpRoute
-       Label label = new Label(service.getHelp());
-       addComponent(label);
+       Span helpSpan = new Span(service.getHelp());
+       addComponent(helpSpan);
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -39,8 +39,8 @@ public class MyLabel extends Component {`
`39`	`39`	`public MyLabel() {`
`40`	`40`	`ShadowRoot shadowRoot = getElement()`
`41`	`41`	`.attachShadow();`
`42`		`- Label textLabel = new Label("In the shadow");`
`43`		`- shadowRoot.appendChild(textLabel.getElement());`
	`42`	`+ Span textSpan = new Span("In the shadow");`
	`43`	`+ shadowRoot.appendChild(textSpan.getElement());`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`	`----`
Original file line number	Diff line number	Diff line change
`@@ -100,8 +100,8 @@ public class HelpView extends VerticalLayout implements View {`
`100`	`100`	`HelpService service = context.getBean(HelpService.class);`
`101`	`101`	`// every time when {@code context.getBean(HelpService.class)} called`
`102`	`102`	`// the HelpService instance is the same until we're inside HelpView/HelpRoute`
`103`		`- Label label = new Label(service.getHelp());`
`104`		`- addComponent(label);`
	`103`	`+ Span helpSpan = new Span(service.getHelp());`
	`104`	`+ addComponent(helpSpan);`
`105`	`105`	`}`
`106`	`106`	`}`
`107`	`107`