add improvements to examples

src/TwigComponent/doc/index.rst

@@ -1050,8 +1050,8 @@ And in your component template you can access your embedded block
         {% block footer %}{% endblock %}
      </div>
 
-Anonymous TwigComponent
------------------------
+Anonymous Components
+--------------------
 
 Sometimes a component is simple enough that it doesn't have any complex logic or injected services.
 In this case, you can skip the class and only create the template. The component name is determined
@@ -1060,97 +1060,59 @@ by the location of the template (see `Twig Template Namespaces`_):
 .. code-block:: html+twig
 
     {# templates/components/Button/Primary.html.twig #}
-    <button class="primary">
-        {% block content %}
-        {% endblock %}
+    <button {{ attributes.defaults({ class: 'primary' }) }}>
+        {% block content %}{% endblock %}
     </button>
 
 Then use your component with ``:`` to navigate through sub-directories (if there are any):
 
 .. code-block:: html+twig
 
-     {# index.html.twig #}
-     ...
+    {# index.html.twig #}
+    ...
     <div>
-       <twig:Button:Primary>
-           Click Me!
-       </twig:Button:Primary>
+       <twig:Button:Primary>Click Me!</twig:Button:Primary>
     </div>
 
-Still get all your attributes by rendering the ``attributes`` object in your template:
-
-.. code-block:: html+twig
-
-    {# templates/components/Button.html.twig #}
-    <button {{ attributes }}>
-        {% block content %}
-        {% endblock %}
-    </button>
+    {# renders as: #}
+    <button class="primary">Click Me!</button>
 
-Then pass any further data to your reusable "button" like so:
+Like normal, you can pass extra attributes that will be rendered on the element:
 
 .. code-block:: html+twig
 
-     {# index.html.twig #}
-     ...
+    {# index.html.twig #}
+    ...
     <div>
-        <twig:Button role="button" class="foo">
-            Click Me!
-        </twig:Button>
+       <twig:Button:Primary type="button" name="foo">Click Me!</twig:Button:Primary>
     </div>
 
     {# renders as: #}
-    <button role="button" class="foo">Click Me!</button>
-
-Now let's pass props to your "button" by defining a ``{% props %}`` tag in its view.
-It allows to declare which props are required and which have a default value.
+    <button class="primary" type="button" name="foo">Click Me!</button>
 
-For a required prop "label", and one optional prop "primary":
+You can also pass a variable (prop) into your template:
 
 .. code-block:: html+twig
 
-    {# templates/components/Button.html.twig #}
-    {% props label, primary = true %}
-
-    <button class="{{ primary ? 'primary' : 'secondary' }} large rounded">
-        {{ label }}
-    </button>
-
-And use it:
-
-.. code-block:: html+twig
-
-     {# index.html.twig #}
-     ...
+    {# index.html.twig #}
+    ...
     <div>
-       <twig:Button label="Click Me!" />
+        <twig:Button icon="fa-plus" type="primary" role="button">Click Me!</twig:Button>
     </div>
 
-.. note::
-
-    Definining a property in ``{% props %}`` makes it accessible as a variable and not available inside the ``attributes`` object once passed to the component.
-
-    .. code-block:: html+twig
+To tell the system that ``icon`` and ``type`` are props and not attributes, use the ``{% props %}`` tag at the top of your template.
 
-        {# templates/components/Button.html.twig #}
-        {% props label, disabled = false %}
-
-        <button {{ attributes.defaults({class: disabled ? 'disabled' : 'default'}) }}>
-            {{ label }}
-        </button>
-
-    This means that ``disabled`` is used here to set a class name but will not be rendered in HTML attributes:
-
-    .. code-block:: html+twig
+.. code-block:: html+twig
 
-         {# index.html.twig #}
-         ...
-        <div>
-            <twig:Button label="Click Me!" :disabled="true" />
-        </div>
+    {# templates/components/Button.html.twig #}
+    {% props icon = null, type = 'primary' %}
 
-        {# renders as: #}
-        <button class="disabled">Click Me!</button>
+    <button {{ attributes.defaults({ class: 'btn btn-'~type }) }}>
+        {% block content %}{% endblock %}
+        {% if icon %}
+            <span class="fa-solid fa-{{ icon }}"></span>
+        {% endif %}
+    </button>
 
 Test Helpers
 ------------