> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Set style name

## **`style.setName(name)`**

Rename an existing style in place. The rename preserves the style's CSS properties, its combo class parent relationship, and any elements the style is applied to.

### Syntax

```typescript
style.setName(name: string): Promise<null>
```

### Parameters

* **`name`**: *string* - The new name for the style. The name must:
  * Be 1–150 characters long.
  * Not match another existing style's name (including parents of combo classes).
  * Not match a reserved tag-style name.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null` once the rename is committed to the Designer.

The Promise rejects with an `Error` when validation fails. Inspect the error's `cause.tag` to determine the failure:

| `cause.tag`           | Meaning                                                                                  |
| :-------------------- | :--------------------------------------------------------------------------------------- |
| `invalidStyleNameTag` | The name is empty, longer than 150 characters, reserved, or collides with another style. |
| `invalidStyleTag`     | The style isn't a class style. Only class styles can be renamed.                         |
| `resourceMissingTag`  | The style no longer exists.                                                              |
| `modeForbiddenTag`    | The current workflow doesn't allow style mutations, such as Comment mode.                |

### Example

```typescript
// Get a style that the app previously created or looked up
const style = await webflow.getStyleByName("btn-primary");

if (style) {
  try {
    // Rename the style in place
    await style.setName("button-primary");
    console.log("Renamed to:", await style.getName());
  } catch (err) {
    const tag = (err as { cause?: { tag?: string } }).cause?.tag;

    if (tag === "invalidStyleNameTag") {
      console.warn("That name is empty, too long, reserved, or already in use.");
    } else if (tag === "invalidStyleTag") {
      console.warn("Only class styles can be renamed.");
    } else {
      throw err;
    }
  }
} else {
  console.log("Style not found.");
}
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |