Skip to main content

Hello Team,


I’ve attached a screenshot showing the setup of my text component.

For the Chip and Switch component, I’ve only set up one text size. However, the button component includes four different sizes: Small, Medium, Large, and X-large.


image 1


The problem I’m facing is that whenever I use the Chip and Switch component, the size options also appear.


image 2


I’m looking for a solution to prevent the size options from appearing on the Chip and Switch component. Only when I choose the button should the size options be available.


I appreciate any assistance you can provide in resolving this issue.


Thanks,

Vijayan M

Why do you want to have all these components as variants of a single component?

Why not create multiple components?


If I’d really want to use them as one component, this is how I would do it:



  1. Create them as own components (Chip, Button, Switch).

  2. Create a wrapper-component that includes just a Chip. I guess this would be an auto-layout container using hug - hug.

  3. Add a variant property on the Chip instance inside your wrapper component & use your desired components (Chip, Button, Switch) as preferred values.

  4. Add the properties of your instance component as nested properties to the wrapper component (Properties → + → Nested instances)


Example: https://www.figma.com/design/nAyUZcUHUqz6YDHzJgEugg/Untitled?node-id=0-1&t=6ySPRbjqGE2A0jpw-1

Appreciate the prompt @Alex134 .


In this section, you’ll notice that all items are structured as text and reside within the text component. This approach eliminates the need to use separate components. By calling the text component, I can access its various variants, which will naturally expand the list. It’s recommended to avoid recalling the component names; instead, they are located under the text component.


For instance, should I decide to create a button, I can make use of the text component. Additionally, any modifications can be made directly within this component.


Thanks,

Vijayan M

Reply


Terms & ConditionsCookie settings