树枝按钮错误与一些奇怪的角色

i want two button in a twig page where it show whether the status is "true" or "false", so i write my code like so, and it is working, i mean some of the part because it is returning whether it is "true" or "false" and changing it's color. But it is also re

 <td>
            <div class="btn-group" data-toggle="buttons-radio">
             {% if userinfo.stats == TRUE %} 
               {<button class="btn btn-success btn-xs myOn-button" >}
                 {% else %}{<button class="btn btn-danger btn-xs myOn-button" >}{% endif %}
                  <button onclick="deleteStuff()">ON</button> 
     </div> </td> 

But it is also showing some weird character in the button. Do someone knows where i am making mistake. I need to make two button "ON" and "OFF" which return the stats.

if i remove the---

{<button class="btn btn-success btn-xs myOn-button" >}

to

<button class="btn btn-success btn-xs myOn-button" >

it return me ---

so there is no button named "on" or "OFF" ! How i can fix it ...

Remove your curly braces around your code like so

{<button class="btn btn-success btn-xs myOn-button" >}

to

<button class="btn btn-success btn-xs myOn-button" >

EDIT:

<td>
    <div class="btn-group" data-toggle="buttons-radio">
        {% if userinfo.stats == TRUE %} 
            <button class="btn btn-success btn-xs myOn-button" >
        {% else %}
            <button class="btn btn-danger btn-xs myOn-button" >
        {% endif %}
            <button onclick="deleteStuff()">ON</button> 
    </div> 
</td> 

Better way to do it:

<td>
    <div class="btn-group" data-toggle="buttons-radio">
        <button class="btn btn-{{userinfo.stats ? 'success': 'danger'}} btn-xs myOn-button" >
        <button onclick="deleteStuff()">ON</button> 
    </div> 
</td>