Variants and properties
Inspect component states, adjust their properties, and understand the scope of your edits.
A variant shows one useful example of a component. For a button, that could be a filled appearance, a disabled state, or a loading state. Properties control details such as the button's label, size, and whether it is disabled.
| Term | Button example |
|---|---|
| Component | The reusable button used on your pages. |
| Story | A place to view and work with examples of that button. |
| Variant | A named example, such as Loading. |
| Property | A setting, such as the label or size. |
A variant can combine property values and surrounding content, such as a button inside a form.
Inspect a variant
- Open Design → Stories and open a story.
- If the editing panels are hidden, turn on Design mode above the example.
- If Variants appears, select the example you want to inspect. A story with one example does not need a variant list.
- Select an element in the example, or find it in Layers.
- Inspect its available settings in Properties.
The settings you can change depend on the component and the selected element. If a state or setting is missing, ask the agent to add it.
Understand what an edit changes
Edits in Stories are real project changes. Changing a component's shared design can affect every page that uses it, while changing an example's content or settings affects that example.
Before editing, check which element you have selected and whether you want to change the shared component or just the example.
To change the shared component:
Make the corners rounder on this button everywhere it is used.
To change the example:
Add a variant with a longer button label so I can check how it fits.
After changing the shared component, inspect its other variants and a page that uses it.
Discuss a component with the agent
In the Stories gallery, open a story card's actions menu and select Add to chat to give the agent context about the component. Describe the result you want and name the variant if the request concerns a particular state:
In this card's unavailable variant, keep the product details visible and disable the purchase button.