Button

Displays consistent, accessible buttons and anchor links.

The button component allows you to style elements as buttons using a combination of three Tailwind classes: a base class for structural rules, a variant for visual style, and a size for dimensions.

1<button class="btn variant-default size-default" type="button" aria-label="Demo (not functional)">Button</button>
2<button class="btn variant-outline size-icon" type="button" aria-label="Demo (not functional)">
3  {{ partial "ui/icon" (dict
4    "name" "pizza"
5  )}}
6</button>

Reference

The button component relies on the following CSS class categories:

Variants

variant-default
variant-destructive
variant-outline
variant-secondary
variant-ghost
variant-link

Sizes

size-default
size-sm
size-lg
size-icon
size-icon-sm
size-icon-lg

Usage

Add the btn, variant-* and size-*, classes to buttons or links.

You can define additional or edit the existing classes in the file: assets/css/components/_button.css.

Since the component is rendered exclusively from CSS, there is no visual difference between a <button> and an <a>.

Link

1<button class="btn variant-default size-default" type="button" aria-label="Demo (not functional)">Button</button>
2<a class="btn variant-default size-icon" href="#usage"  aria-label="Demo (not functional)">Link</a>

Tips & tricks

Icon Combinations
You can use the Icon component with any variant to combine icons and text.

1<button class="btn variant-default size-default" type="button" aria-label="Demo (not functional)">   
2  {{ partial "ui/icon" (dict
3    "name" "pizza"
4  )}} 
5  Button
6</button>

Group Animations
Create complex effects using Tailwind’s group modifiers.

 1<button class="btn variant-default size-default group/btn" type="button" aria-label="Demo (not functional)">  
 2  <span class="group-hover/btn:hidden"> 
 3    {{ partial "ui/icon" (dict
 4      "name" "pizza"
 5    )}} 
 6  </span>
 7  <span class="hidden group-hover/btn:block">
 8    {{ partial "ui/icon" (dict
 9      "name" "hamburger"
10    )}} 
11  </span>
12    Button
13</button>

Manual Installation

Create the file assets/components/_button.css, paste the following content:

assets/components/_button.css

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

Import it in your main Tailwind file:

assets/main.css

1/* Components */
2/** (Import Keystone components CSS here) */
3@import './components/_button.css';