Button
Render a buttons/link with optional icons (prefix, suffix, both).
Usage
Primary
<div class="grid place-content-center gap-4"> <twig:ui:Button> Primary </twig:ui:Button> </div>
Secondary
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="secondary"> Secondary </twig:ui:Button> </div>
Outline
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="outline"> Outline </twig:ui:Button> </div>
Ghost
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="ghost"> Ghost </twig:ui:Button> </div>
Destructive
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="destructive"> Destructive </twig:ui:Button> </div>
Success
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="success"> Success </twig:ui:Button> </div>
Warning
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="warning"> Warning </twig:ui:Button> </div>
Info
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="info"> Info </twig:ui:Button> </div>
Link
<div class="grid place-content-center gap-4"> <twig:ui:Button variant="link"> Link </twig:ui:Button> </div>
Sizes
<div class="flex flex-wrap gap-4 justify-center items-center"> <twig:ui:Button size="lg"> Button sm </twig:ui:Button> <twig:ui:Button> Button </twig:ui:Button> <twig:ui:Button size="sm"> Button sm </twig:ui:Button> <twig:ui:Button size="icon-sm"> <twig:ux:icon name="lucide:circle-dashed" /> </twig:ui:Button> <twig:ui:Button size="icon"> <twig:ux:icon name="lucide:circle-dashed" /> </twig:ui:Button> <twig:ui:Button size="icon-lg"> <twig:ux:icon name="lucide:circle-dashed" /> </twig:ui:Button> </div>