TwigComponent: explain how to define default values

Author: alexislefebvre

src/TwigComponent/doc/index.rst

@@ -716,6 +716,31 @@ To tell the system that ``icon`` and ``type`` are props and not attributes, use
         {% endif %}
     </button>
 
+You can specify mandatory and optional props:
+
+.. code-block:: html+twig
+
+    {# templates/components/Button.html.twig #}
+    {% props icon, type = 'primary' %}
+
+    <button {{ attributes.defaults({class: 'btn btn-'~type}) }}>
+        {% block content %}{% endblock %}
+        <span class="fa-solid fa-{{ icon }}"></span>
+    </button>
+
+Examples of usage:
+
+.. code-block:: html+twig
+
+    {# property "icon" is missing, an exception is thrown #}
+    <twig:Button>Share</twig:Button>
+
+    {# property "icon" is passed, property "type" use its default value "primary" #}
+    <twig:Button icon="share">Share</twig:Button>
+
+    {# both properties "icon" and "type" are passed #}
+    <twig:Button icon="share" type="secondary>Share</twig:Button>
+
 .. _embedded-components:
 
 Passing HTML to Components Via Blocks