33- Component: Button
44- Code:
55```twig
6- <div class="flex items-center gap-2">
7- <twig:Button size="sm">Small</twig:Button>
8- <twig:Button>Default</twig:Button>
9- <twig:Button size="lg">Large</twig:Button>
6+ <div class="flex flex-col items-start gap-8 sm:flex-row">
7+ <div class="flex items-center gap-2">
8+ <twig:Button size="sm" variant="outline">Small</twig:Button>
9+ <twig:Button size="icon-sm" variant="outline" aria-label="Submit">
10+ <twig:ux:icon name="lucide:arrow-up-right" class="size-4" />
11+ </twig:Button>
12+ </div>
13+ <div class="flex items-center gap-2">
14+ <twig:Button variant="outline">Default</twig:Button>
15+ <twig:Button variant="outline" aria-label="Submit">
16+ <twig:ux:icon name="lucide:arrow-up-right" class="size-4" />
17+ </twig:Button>
18+ </div>
19+ <div class="flex items-center gap-2">
20+ <twig:Button size="lg" variant="outline">Large</twig:Button>
21+ <twig:Button size="icon-lg" variant="outline" aria-label="Submit">
22+ <twig:ux:icon name="lucide:arrow-up-right" class="size-4" />
23+ </twig:Button>
24+ </div>
1025</div>
1126```
1227- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
13- < div class ="flex items-center gap-2 ">
14- < button data-slot ="button " class ="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 "> Small</ button >
15- < button data-slot ="button " class ="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[>svg]:px-3 "> Default</ button >
16- < button data-slot ="button " class ="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6 has-[>svg]:px-4 "> Large</ button >
28+ < div class ="flex flex-col items-start gap-8 sm:flex-row ">
29+ < div class ="flex items-center gap-2 ">
30+ < button data-slot ="button " class ="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 "> Small</ button >
31+ < button data-slot ="button " class ="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-8 " aria-label ="Submit "> < svg xmlns ="http://www.w3.org/2000/svg " viewbox ="0 0 24 24 " fill ="currentColor " class ="size-4 " aria-hidden ="true "> < path fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M7 7h10v10M7 17L17 7 "> </ path > </ svg >
32+ </ button >
33+ </ div >
34+ < div class ="flex items-center gap-2 ">
35+ < button data-slot ="button " class ="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 "> Default</ button >
36+ < button data-slot ="button " class ="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 " aria-label ="Submit "> < svg xmlns ="http://www.w3.org/2000/svg " viewbox ="0 0 24 24 " fill ="currentColor " class ="size-4 " aria-hidden ="true "> < path fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M7 7h10v10M7 17L17 7 "> </ path > </ svg >
37+ </ button >
38+ </ div >
39+ < div class ="flex items-center gap-2 ">
40+ < button data-slot ="button " class ="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-10 px-6 has-[>svg]:px-4 "> Large</ button >
41+ < button data-slot ="button " class ="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-10 " aria-label ="Submit "> < svg xmlns ="http://www.w3.org/2000/svg " viewbox ="0 0 24 24 " fill ="currentColor " class ="size-4 " aria-hidden ="true "> < path fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M7 7h10v10M7 17L17 7 "> </ path > </ svg >
42+ </ button >
43+ </ div >
1744</ div >
0 commit comments