Use:

Design attributes in LWC are used to:

Allow users to customize components directly in the Lightning App Builder.
Create flexible and reusable components that adapt to different contexts.
Simplify the process of configuring components for different use cases.
Enhance the user experience by providing easy-to-use configuration options.

greetingComponent.html

<template>
    <lightning-card title="Greeting Component">
        <p>{greetingMessage}</p>
    </lightning-card>
</template>

greetingComponent.js

import { LightningElement, api } from 'lwc';

export default class GreetingComponent extends LightningElement {
    @api greetingMessage = 'Hello, World!';
}

greetingComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="greetingComponent">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage, lightning__RecordPage, lightning__HomePage">
            <property name="greetingMessage" type="String" label="Greeting Message" description="Message to display in the greeting component" default="Hello, World!"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Design attributes in LWC offer a robust way to make your components configurable and reusable in the Lightning App Builder. By defining design attributes, you can empower users to customize component behavior and appearance without changing the code. This enhances the flexibility and adaptability of your components, making them suitable for a wide range of use cases. The examples provided demonstrate how to implement and use design attributes effectively, showcasing their benefits in creating dynamic and user-friendly Salesforce applications.
Happy Coding!

Blogs

Design Attributes in LWC