Buttons

Styles for consistent buttons

1<button class="variant-outline size-default">Button</button>
2<button class="variant-outline size-icon" aria-label="Submit">
3  <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"  stroke-width="2" class="lucide lucide-arrow-up-icon lucide-arrow-up">
4    <path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>
5  </svg>
6</button>

Installation

Copy and paste the following into your Tailwind css file

assets/css/main.css

 1button,
 2.button.a {
 3  @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
 4}
 5/** Button Variants */
 6button.variant-default,
 7a.variant-default {
 8  @apply bg-primary text-primary-foreground hover:bg-primary/90;
 9}
10button.variant-destructive,
11a.variant-destructive {
12  @apply bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white;
13}
14button.variant-outline,
15a.variant-outline {
16  @apply bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs;
17}
18button.variant-secondary,
19a.variant-secondary {
20  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
21}
22button.variant-ghost,
23a.variant-ghost {
24  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50;
25}
26button.variant-link,
27a.variant-link {
28  @apply text-primary underline-offset-4 hover:underline;
29}
30
31/** Button Size */
32button.size-default,
33a.size-default {
34  @apply h-9 px-4 py-2 has-[>svg]:px-3;
35}
36button.size-sm,
37a.size-sm {
38  @apply h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5;
39}
40button.size-lg,
41a.size-lg {
42  @apply h-10 rounded-md px-6 has-[>svg]:px-4;
43}
44button.size-icon,
45a.size-icon {
46  @apply size-9;
47}
48button.size-icon-sm,
49a.size-icon-sm {
50  @apply size-8;
51}
52button.size-icon-lg,
53a.size-icon-lg {
54  @apply size-10;
55}

Variants

1<button class="variant-default size-default">Default</button>
2<button class="variant-outline size-default">Outline</button>
3<button class="variant-destructive size-default">Destructive</button>
4<button class="variant-secondary size-default">Secondary</button>
5<button class="variant-ghost size-default">Ghost</button>
6<button class="variant-link size-default">Link</button>

Sizes

 1<button class="variant-outline size-default">Default</button>
 2
 3<button class="variant-outline size-sm">Small</button>
 4
 5<button class="variant-outline size-lg">Large</button>
 6
 7<button class="variant-outline size-icon-sm">
 8  <svg>
 9    <use href="#heart-handshake"></use>
10  </svg>
11</button>
12
13<button class="variant-outline size-icon">
14  <svg>
15    <use href="#heart-handshake"></use>
16  </svg>
17</button>
18
19<button class="variant-outline size-icon-lg">
20  <svg>
21    <use href="#heart-handshake"></use>
22  </svg>
23</button>
24
25<!--SVG Sprite-->
26<svg width="0" height="0" class="hidden">
27  <symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="heart-handshake">
28    <path d="M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"></path>
29  </symbol>
30</svg>

With Icons

 1<button class="variant-default size-default"> 
 2  <svg>
 3    <use href="#heart-handshake"></use>
 4  </svg>
 5  Default
 6</button>
 7
 8<button class="variant-secondary size-sm">
 9  <svg>
10    <use href="#heart-handshake"></use>
11  </svg> 
12  Small
13</button>
14
15<button class="variant-destructive size-lg">
16  <svg>
17    <use href="#heart-handshake"></use>
18  </svg> 
19  Large
20</button>
21
22<!--SVG Sprite-->
23<svg width="0" height="0" class="hidden">
24  <symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="heart-handshake">
25    <path d="M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"></path>
26  </symbol>
27</svg>