diff --git a/docs/img/variants/07-variants-boolean.webp b/docs/img/variants/07-variants-boolean.webp new file mode 100644 index 0000000000..894c5f45db Binary files /dev/null and b/docs/img/variants/07-variants-boolean.webp differ diff --git a/docs/user-guide/design-systems/variants.njk b/docs/user-guide/design-systems/variants.njk index bba1cc96f0..5b41f0fade 100644 --- a/docs/user-guide/design-systems/variants.njk +++ b/docs/user-guide/design-systems/variants.njk @@ -107,6 +107,25 @@ desc: Streamline your design workflow with Penpot's Components guide! Learn to c
  • Select the variant copy, press right-click, and select the menu option Restore variant (will show if the main component still exists).
    • +

    Toggle for boolean variants

    +

    When a variant property represents a boolean state, Penpot can display it as a toggle instead of a dropdown. This offers a quicker and more visual way to switch between two opposite values when working with copies.

    +

    The toggle appears in place of the property values dropdown, only when a copy is selected.

    +
    + Boolean variant option +
    +

    Accepted value pairs

    +

    For Penpot to recognize the property as a boolean and display the toggle, the property must be defined with exactly two opposing values. These can be any of the following pairs:

    + +

    The order of the values does not matter. Penpot automatically maps them to ON and OFF states:

    + +

    Use variants

    Once you have created your variants, you can place a copy of a component with variants into your design and then switch between its different versions.