# Aura Component Bundle Design Resources

Use a design resource to control which attributes are exposed to builder tools like the Lightning App Builder, Experience Builder, or Flow Builder. A design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Aura component—information that visual tools need to display the component in a page or app.

For example, here’s a simple design resource that goes in a bundle with a “Hello World” component. We’ll build on this example as we move through the supported tags and attributes.

```nolang
<design:component label="Hello World">
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
    <design:attribute name="greeting" label="Greeting" />
</design:component>
```

## `design:component`

This is the root element for the design resource. It contains the component’s design-time configuration for tools such as the App Builder to use.

| Attribute | Description                                                                                                                                                                                                                           |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label     | Sets the label of the component when it displays in tools such as App Builder. When creating a custom Lightning page template component, this text displays as the name of the template in the Lightning App Builder new page wizard. |

:::note
Label expressions in markup are supported in .cmp and .app resources only.
:::

## `design:attribute`

To make an Aura component attribute available for admins to edit in tools such as the App Builder, add a `design:attribute` node for the attribute into the design resource. An attribute marked as required in the component definition automatically appears, unless it has a default value assigned to it.

For Lightning page interfaces, the design resource supports only attributes of type `Integer`, `String`, or `Boolean`. To see which attribute types the `lightning:availableForFlowScreens` interface supports, go to [Which Custom Lightning Component Attribute Types Are Supported in Flows?](/docs/platform/aura-platform/guide/components-config-for-flow-tips-map.md).

:::note
In a `design:attribute` node, Flow Builder supports only the `name`, `label`, `description`, and `default` attributes. The other attributes, like `min` and `max`, are ignored.
:::

| Attribute     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aiDescription | AI-related description of the attribute, used by Agentforce to help analyze the component. Supported only in orgs that have [Setup with Agentforce](https://help.salesforce.com/s/articleView?id=xcloud.setup_agentforce_overview.htm) enabled.                                                                                                                                                                                                                                           |
| datasource    | Renders a field as a picklist, with static values. Only supported for `String` attributes. You can also set the picklist values dynamically using an Apex class. See [Create Dynamic Picklists for Your Custom Components](/docs/platform/aura-platform/guide/components-config-for-app-builder-dynamic-picklists.md#create-dynamic-picklists-for-your-custom-components) for more information. Any `String` attribute with a `datasource` in a design resource is treated as a picklist. |
| default       | Sets a default value on an attribute in a design resource.                                                                                                                                                                                                                                                                                                                                                                                                                                |
| description   | Displays as an i-bubble for the attribute in the tool.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| label         | Attribute label that displays in the tool.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| max           | If the attribute is an `Integer`, this sets its maximum allowed value. If the attribute is a `String`, this is the maximum length allowed.                                                                                                                                                                                                                                                                                                                                                |
| min           | If the attribute is an `Integer`, this sets its minimum allowed value. If the attribute is a `String`, this is the minimum length allowed.                                                                                                                                                                                                                                                                                                                                                |
| name          | Required attribute. Its value must match the `aura:attribute` name value in the .cmp resource.                                                                                                                                                                                                                                                                                                                                                                                            |
| placeholder   | Input placeholder text for the attribute when it displays in the tool.                                                                                                                                                                                                                                                                                                                                                                                                                    |
| required      | Denotes whether the attribute is required. If omitted, defaults to `false`.                                                                                                                                                                                                                                                                                                                                                                                                               |
| type          | The design attribute’s data type. `Color` is the only valid value. The `Color` type displays a color picker in Experience Builder. Applies only to components that implement the `forceCommunity:availableForAllPageTypes` interface. Supported only for `aura:attribute` elements of type `String` in the .cmp resource. Use the `default` attribute to specify RGBA, RGB, or hex strings.                                                                                               |

Example `datasource`:

```xml
<design:attribute name="Name" datasource="value1,value2,value3" />
```

Example `default`:

```xml
<design:attribute name="Name" datasource="value1,value2,value3" default="value1" />
```

Example `type`:

```xml
<design:attribute type="Color" name="buttonColor" default="rgba(0, 255, 255, 1)" />
```

:::note
Label expressions in markup are supported in .cmp and .app resources only.
:::

## `<design:suppportedFormFactors>` and `<design:suppportedFormFactor>`

Use these tag sets to designate which devices your component supports. The `design:suppportedFormFactor` subtag supports the `type` attribute. Valid `type` values are `Large` (desktop) and `Small` (phone).

If you don’t declare form factor support for a component, then by default, it supports the same form factors as the page types that it’s assigned to. App and record pages support the `Large` and `Small` form factors. Home pages support only the `Large` form factor.

Components on app and record pages can render on both mobile and desktop because those pages support both phone and desktop. Components on Home pages can render only on desktop because Home pages are supported only for desktop.

If you have an app or record page—which support both desktop and phone—you can use `design:suppportedFormFactor` to configure a component to render only when the page is viewed on a particular device. For example, if you restrict form factor support for your app page component to `Small`, the app page drops the component when the page is viewed on desktop. The app page displays the component when the page is viewed on a phone.

Here’s the “Hello World” component design resource, with both desktop and phone support added.

```xml
<design:component label="Hello World">
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
    <design:attribute name="greeting" label="Greeting" />
    <design:supportedFormFactors>
        <design:supportedFormFactor type="Large"/>
        <design:supportedFormFactor type="Small"/>
    </design:supportedFormFactors>
</design:component>
```

You can add this tag set to your component design file to create custom page templates that support only desktop, only phone, or both.

## `<sfdc:objects>` and `<sfdc:object>`

Use these tag sets to restrict your component to one or more objects.

:::note
`<sfdc:objects>` and `<sfdc:object>` aren’t supported in Experience Builder or the Flow Builder. They’re also ignored when setting a component to use as an object-specific action or to override a standard action.
:::

Here’s the same “Hello World” component’s design resource restricted to two objects.

```nolang
<design:component label="Hello World">
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
    <design:attribute name="greeting" label="Greeting" />
    <design:supportedFormFactors>
        <design:supportedFormFactor type="Large"/>
        <design:supportedFormFactor type="Small"/>
    </design:supportedFormFactors>
    <sfdc:objects>
        <sfdc:object>Custom__c</sfdc:object>
        <sfdc:object>Opportunity</sfdc:object>
    </sfdc:objects>
</design:component>
```

If an object is installed from a package, add the `namespace__` string to the beginning of the object name when including it in the `<sfdc:object>` tag set. For example: `objectNamespace__ObjectApiName__c`.

These tag sets don't support external objects.

See the [User Interface API Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_get_started_supported_objects.htm) for the list of supported objects.

## `<design:ai>` and `<design:description>`

Use these tag sets to add an AI description to your component and make it accessible to Agentforce in Setup. Supported only for record pages in orgs that have [Setup with Agentforce](https://help.salesforce.com/s/articleView?id=xcloud.setup_agentforce_overview.htm) enabled.

In Setup, Agentforce can analyze and recommend custom components when creating a new Lightning page as a result of a user utterance. For Agentforce to analyze if your custom component fits the requirements outlined in the user’s utterance, your component must contain an AI-related description of what it does as well as descriptions of its attributes.

These descriptions aren't user-facing. Agentforce uses them as part of its analysis of the component for inclusion in agent-generated Lightning pages. AI component descriptions can be up to 4,000 characters. See [Tips for Writing AI Component Descriptions](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-for-agentforce-tips.md) in the Lightning Web Components Developer Guide.

Specify the `design:ai` tag only once inside a .design file. The `design:ai` tag contains one `design:description` tag.

To add an AI-related property description, use the `aiDescription` attribute on the `design:attribute` tag.

Here’s the same “Hello World” component with AI-related component and attribute descriptions.

```nolang
<design:component label="Hello World">
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet"/>
    <design:attribute name="greeting" label="Greeting"/>
    <design:supportedFormFactors>
        <design:supportedFormFactor type="Large"/>
        <design:supportedFormFactor type="Small"/>
    </design:supportedFormFactors>
    <sfdc:objects>
        <sfdc:object>Custom__c</sfdc:object>
        <sfdc:object>Opportunity</sfdc:object>
    </sfdc:objects>
    <design:ai>
        <design:description>This component displays a greeting that's addressed to the name in the subject property.
        </design:description>
   </design:ai>
   <design:attribute name="myAttributeName" aiDescription="AI property description"/>
</design:component>

```

**See Also**

- [Configure Components for Lightning Pages and the Lightning App Builder](/docs/platform/aura-platform/guide/components-config-for-app-builder.md)
- [Tips and Considerations for Configuring Components for Lightning Pages and the Lightning App Builder](/docs/platform/aura-platform/guide/components-config-for-app-builder-tips.md)