<div class="flex flex-wrap gap-4 items-center">
    <!-- Basic button with icon -->
    <c-lb.button icon="rmx.home">
        Home
    </c-lb.button>

    <!-- Button with different variants and icons -->
    <c-lb.button variant="primary" icon="rmx.heart">
        Like
    </c-lb.button>

    <c-lb.button variant="success" icon="rmx.check">
        Save
    </c-lb.button>

    <c-lb.button variant="warning" icon="rmx.alert">
        Warning
    </c-lb.button>

    <c-lb.button variant="error" icon="rmx.close">
        Delete
    </c-lb.button>

    <!-- Outline style with icons -->
    <c-lb.button btnStyle="outline" icon="rmx.download">
        Download
    </c-lb.button>

    <!-- Ghost style with icons -->
    <c-lb.button btnStyle="ghost" icon="rmx.settings">
        Settings
    </c-lb.button>

    <!-- Different sizes with icons -->
    <c-lb.button size="sm" icon="rmx.add">
        Add
    </c-lb.button>

    <c-lb.button size="lg" icon="rmx.upload">
        Upload File
    </c-lb.button>

    <!-- Icon only buttons (square/circle) -->
    <c-lb.button modifier="square" icon="rmx.menu-4" variant="primary">
    </c-lb.button>

    <c-lb.button modifier="circle" icon="rmx.add" variant="accent">
    </c-lb.button>

    <!-- Button with filled icon -->
    <c-lb.button icon="rmx.star" iconFill>
        Favorite
    </c-lb.button>
</div>
