diff --git a/src/TwigComponent/doc/index.rst b/src/TwigComponent/doc/index.rst index da016315144..a8bda6509af 100644 --- a/src/TwigComponent/doc/index.rst +++ b/src/TwigComponent/doc/index.rst @@ -700,12 +700,14 @@ You can also pass a variable (prop) into your template: To tell the system that ``icon`` and ``type`` are props and not attributes, use the -``{% props %}`` tag at the top of your template. +``{% props %}`` tag at the top of your template. Props are required by default, but +it is possible to set a default value with ``=``: .. code-block:: html+twig {# templates/components/Button.html.twig #} - {% props icon = null, type = 'primary' %} + {# prop "icon" is required, but prop "type" has a default value to "primary" #} + {% props icon, type = 'primary' %} +Examples of usage: + +.. code-block:: html+twig + + {# property "icon" is missing, an exception is thrown #} + Share + + {# property "icon" is passed, property "type" use its default value "primary" #} + Share + + {# both properties "icon" and "type" are passed #} +