---
title: "Change a component's props and states"
description: "Switch a component's variant, size or other props from the design panel in Build Mode and send the change to the agent."
url: https://help.modeinspect.com/en/articles/26-change-a-component-s-props-and-states
collection: "Build mode"
updated: 2026-10-29
language: en
---

# Change a component's props and states

Switch a component's variant, size or other props from the design panel in Build Mode and send the change to the agent.

Turn a primary button into the secondary variant, or make it small, without touching its styles: pick the value from the props your component already has. The agent then changes the prop where the component is used.

**Before you start**

-   Build Mode open on the page, see [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-and-navigate-build-mode.md).
    
-   A component from your design system on the page. Plain elements, such as a heading or a div, have styles but no props.
    

## Steps

1.  Click the **Design** button below the message box, or press `⌘ D`, and click the component on the stage. The panel header shows the component's name, and the first section is **Component states**: one row per prop, with its current value.
    
    ![The Design panel with the checkout button selected: Button at the top, Component states with variant default and size lg, then Custom styles](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/TEG4huVIP55PLWLe5oKXRz8N2NJRWe28HJT8ToqAEMeGMBl6laUYREcR1gfF8dhDUpCwLqYORdx.png)
2.  Click the value and pick another one. The menu lists the values the component accepts.
    
    ![The variant menu open: link, default, outline, secondary, ghost, and destructive, with default highlighted as the current value](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/Cy5G2RyhV36JmipJIpYxKgz7zq71WWLcG557KHBOqKdrUB5Lhu8H7BlIznj9CUU28ywzrmsWHqF.png)
3.  Look at the stage: the component is in its new state at once. To restyle this one instance on top of that, use the groups under **Custom styles**, see [Edit styles directly in your app](https://help.modeinspect.com/en/articles/28-edit-styles-in-design-mode.md).
    
4.  Click **Add to build chat**. The card above the message box names the component and lists the prop, old value to new value. A dash as the old value means the prop was not set in the code.
    
    ![The edits card above the message box: Button, variant from default to secondary, with Edit and the Discard edit button highlighted](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/T5GqbOSRMViH8F03XVTxonEij1TR9M5BKKPIba9bIPrYlAGrVvE5OiJbWD5YFhxpbr710cUIkBX.png)
5.  Click **Send** with the message box empty. The chat shows "Apply visual changes to codebase.", and the agent sets the prop where the component is used.
    

The reply names the file and line it changed, and the stage reloads with the new state. Custom styles you added ride along in the same apply.

## On the canvas

An instance placed on the canvas has the same section in its design panel, there spelled **Component States**. The menu next to the instance's name offers **Swap instance** and **Detach instance**. Those change the canvas, not the code.

## If it does not work

-   **There is no Component states section**: the element is not a component from your design system. A heading or a div has styles only.
    
-   **The reply says the edit was skipped because it has no source location**: the component was sent before Modeinspect had found where it is used. Select it again, wait a moment, and send the edit again.
    

## Related

-   [Edit styles directly in your app](https://help.modeinspect.com/en/articles/28-edit-styles-in-design-mode.md)
    
-   [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-and-navigate-build-mode.md)
    
-   [Place components from your codebase](https://help.modeinspect.com/en/articles/34-components-panel.md)

## Related

- [What is Build Mode](https://help.modeinspect.com/en/articles/30-what-is-build-mode.md)
- [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-build-mode-and-move-around-your-app.md)
- [Preview your app at different screen sizes](https://help.modeinspect.com/en/articles/27-preview-your-app-at-different-screen-sizes.md)
- [From a captured frame to code](https://help.modeinspect.com/en/articles/25-from-a-captured-frame-to-code.md)
- [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md)