Button

Buttons use the .ui-button class on <button> or <a> elements. Choose styles with data-variant and dimensions with data-size. Omitting data-variant applies the default style.

Variants

Loading components…

<div class="flex items-center gap-sm">  <button class="ui-button" type="button">Default</button>  <button class="ui-button" data-variant="primary" type="button">Primary</button>  <button class="ui-button" data-variant="muted" type="button">Muted</button>  <button class="ui-button" data-variant="ghost" type="button">Ghost</button>  <button class="ui-button" data-variant="destructive" type="button">Destructive</button>  <button class="ui-button" data-variant="link" type="button">Link</button></div>

/** * button.css — Button (.ui-button) * * @layer      variables, components * @requires   layers.css, _variables.css, _reset.css, kbd.css (--ui-kbd-*) * @uses       color-mix(), oklch(from …) — variant hover/active tints * @uses       text-box — vertical trim (patchy browser support) * @tokens     --ui-button-* (@layer variables) * @consumedby toggle.css (reads the --ui-button-* token family) */@layer variables {  :root {    --ui-button-ring-color: var(--ring-color);    --ui-button-font-family: var(--font-family-body);    --ui-button-font-size: var(--font-size-sm);    --ui-button-font-weight: var(--font-weight-strong);    --ui-button-line-height: 1;    --ui-button-background: var(--card);    --ui-button-background--hover: var(--muted);    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid var(--border);    --ui-button-border--hover: 1px solid var(--border);    --ui-button-border--active: 1px solid var(--border);    --ui-button-gap: var(--step-1);    --ui-button-padding: var(--step-2_5);    --ui-button-height: var(--step-8);    --ui-button-radius: var(--radius-md);    --ui-button-icon-size: var(--step-4);    /* composes into the button's box-shadow list — use a transparent shadow,       never `none`, so the focus ring layers stay valid */    --ui-button-shadow: 0 0 transparent;  }}@layer zazz.components {  /* ===========================================================================  BUTTON  =========================================================================== */  .ui-button {    font-family: var(--ui-button-font-family);    font-size: var(--ui-button-font-size);    font-weight: var(--ui-button-font-weight);    line-height: var(--ui-button-line-height);    display: flex;    align-items: center;    justify-content: center;    column-gap: var(--ui-button-gap);    flex-shrink: 0;    min-block-size: var(--ui-button-height);    min-inline-size: max-content;    padding-inline: var(--ui-button-padding);    border: var(--ui-button-border);    border-radius: var(--ui-button-radius);    color: var(--ui-button-foreground);    background-color: var(--ui-button-background);    background-clip: padding-box;    /* ring renders as box-shadow so it composes with --ui-button-shadow; the       ring widths animate from 0 so the ring grows in smoothly on focus */    --_ring-offset-width: 0px;    --_ring-width: 0px;    --_ring: color-mix(in oklch, var(--ui-button-ring-color) var(--ring-opacity), transparent);    box-shadow:      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),      var(--ui-button-shadow);    cursor: default;    text-decoration: none;    /* transparent twin of the ring for forced-colors / high-contrast modes */    outline: var(--outline-width) var(--outline-style) transparent;    outline-offset: var(--outline-offset);    transition: var(--default-transition);    user-select: none;    text-box: trim-both ex alphabetic;  }  a[href] .ui-button:not(:disabled, [aria-disabled="true"]),  a[href].ui-button:not(:disabled, [aria-disabled="true"]) {    cursor: pointer;  }  /* ===========================================================================  BUTTON STATES  =========================================================================== */  .ui-button:hover:not(:disabled, [aria-disabled="true"]) {    color: var(--ui-button-foreground--hover);    background-color: var(--ui-button-background--hover);    border: var(--ui-button-border--hover);  }  .ui-button:active:not(:disabled, [aria-disabled="true"]) {    color: var(--ui-button-foreground--active);    background-color: var(--ui-button-background--active);    border: var(--ui-button-border--active);  }  .ui-button:focus-visible:not(:disabled, [aria-disabled="true"]) {    --_ring-offset-width: var(--ring-offset-width);    --_ring-width: var(--ring-width);    outline-color: transparent;  }  :is(.ui-button:disabled, .ui-button[aria-disabled="true"]) {    --ui-button-foreground: var(--muted-foreground);    --ui-button-background: var(--muted);    --ui-button-shadow: 0 0 transparent;    --decoration-line: none;    cursor: default;    opacity: 0.5;    outline: none;  }  .ui-button[aria-busy="true"] {    cursor: progress;  }  /* ===========================================================================  BUTTON ICONS  =========================================================================== */  .ui-button > svg {    inline-size: var(--ui-button-icon-size);    block-size: var(--ui-button-icon-size);    pointer-events: none;    justify-content: center;    align-items: center;    display: flex;    padding: 0;  }  /* ===========================================================================  BUTTON VARIANTS  =========================================================================== */  .ui-button[data-variant="primary"] {    --ui-button-background: var(--primary);    --ui-button-background--hover: oklch(from var(--primary) l c h / 0.9);    --ui-button-background--active: oklch(from var(--primary) l c h / 0.8);    --ui-button-foreground: var(--primary-foreground);    --ui-button-foreground--hover: var(--primary-foreground);    --ui-button-foreground--active: var(--primary-foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="muted"] {    --ui-button-background: var(--muted);    --ui-button-background--hover: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-background--active: var(--muted);    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="ghost"] {    --ui-button-background: transparent;    --ui-button-background--hover: var(--muted);    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="destructive"] {    --ui-button-ring-color: var(--destructive);    --ui-button-background: var(--destructive);    --ui-button-background--hover: oklch(from var(--destructive) l c h / 0.9);    --ui-button-background--active: oklch(from var(--destructive) l c h / 0.8);    --ui-button-foreground: var(--destructive-foreground);    --ui-button-foreground--hover: var(--destructive-foreground);    --ui-button-foreground--active: var(--destructive-foreground);    --ui-button-border: 1px solid var(--destructive);    --ui-button-border--hover: 1px solid var(--destructive);    --ui-button-border--active: 1px solid var(--destructive);    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="link"] {    --ui-button-background: transparent;    --ui-button-background--hover: transparent;    --ui-button-background--active: transparent;    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--primary);    --ui-button-foreground--active: oklch(from var(--primary) l c h / 0.8);    --ui-button-border: none;    --ui-button-border--hover: none;    --ui-button-border--active: none;    --ui-button-height: fit-content;    --ui-button-padding: 0;    --ui-button-radius: 0;    --ui-button-shadow: 0 0 transparent;    text-decoration-line: var(--decoration-line);    text-decoration-style: var(--decoration-style);    text-decoration-color: var(--decoration-color);    text-underline-offset: var(--decoration-offset);    text-decoration-thickness: var(--decoration-thickness);  }  .ui-button[data-variant="link"]:hover:not(:disabled, [aria-disabled="true"]) {    text-decoration-color: var(--decoration-color--hover);    text-underline-offset: var(--decoration-offset--hover);  }  .ui-button[data-variant="link"]:active:not(:disabled, [aria-disabled="true"]) {    text-decoration-color: var(--decoration-color--active);    text-underline-offset: var(--decoration-offset--active);  }  /* ===========================================================================  BUTTON SIZES  =========================================================================== */  .ui-button[data-size="sm"] {    --ui-button-height: var(--step-6);    --ui-button-padding: var(--step-2);    --ui-button-radius: var(--radius-sm);  }  .ui-button[data-size="icon"] {    block-size: var(--ui-button-height);    inline-size: var(--ui-button-height);    padding: 0;    aspect-ratio: 1 / 1;  }  .ui-button[data-size="icon-sm"] {    --ui-button-height: var(--step-6);    --ui-button-padding: var(--step-2);    --ui-button-radius: var(--radius-sm);    --ui-button-icon-size: var(--step-3_5);    block-size: var(--ui-button-height);    inline-size: var(--ui-button-height);    padding: 0;    aspect-ratio: 1 / 1;  }  /* ===========================================================================  BUTTON KBD  =========================================================================== */  /* Descendant (not child) so keys wrapped in a ui-kbd-group still resize */  .ui-button :where(kbd) {    --ui-kbd-min-inline-size: var(--step-4_5);    --ui-kbd-min-block-size: var(--step-4_5);    --ui-kbd-icon-size: var(--step-3);  }  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)) {    padding-inline-end: var(--step-1_5);  }  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)) {    padding-inline-start: var(--step-1_5);  }  .ui-button[data-size="sm"]:has(    > :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)  ) {    padding-inline-end: var(--step-0_5);  }  .ui-button[data-size="sm"]:has(    > :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)  ) {    padding-inline-start: var(--step-0_5);  }}

With icons

Add an inline <svg> inside the button. Icons are sized automatically:

Loading components…

<div class="flex items-center gap-sm">  <button class="ui-button" data-variant="primary" type="button">    Start free trial    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">      <rect width="256" height="256" fill="none" />      <line        x1="40"        y1="128"        x2="216"        y2="128"        fill="none"        stroke="currentColor"        stroke-linecap="round"        stroke-linejoin="round"        stroke-width="16"      />      <polyline        points="144 56 216 128 144 200"        fill="none"        stroke="currentColor"        stroke-linecap="round"        stroke-linejoin="round"        stroke-width="16"      />    </svg>  </button>  <button class="ui-button" type="button">    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">      <rect width="256" height="256" fill="none" />      <path        d="M128,88a32,32,0,0,1,32-32h72V200H160a32,32,0,0,0-32,32"        fill="none"        stroke="currentColor"        stroke-linecap="round"        stroke-linejoin="round"        stroke-width="16"      />      <path        d="M24,200H96a32,32,0,0,1,32,32V88A32,32,0,0,0,96,56H24Z"        fill="none"        stroke="currentColor"        stroke-linecap="round"        stroke-linejoin="round"        stroke-width="16"      />      <line        x1="160"        y1="96"        x2="200"        y2="96"        fill="none"        stroke="currentColor"        stroke-linecap="round"        stroke-linejoin="round"        stroke-width="16"      />      <line        x1="160"        y1="128"        x2="200"        y2="128"        fill="none"        stroke="currentColor"        stroke-linecap="round"        stroke-linejoin="round"        stroke-width="16"      />      <line        x1="160"        y1="160"        x2="200"        y2="160"        fill="none"        stroke="currentColor"        stroke-linecap="round"        stroke-linejoin="round"        stroke-width="16"      />    </svg>    Read article  </button></div>

/** * button.css — Button (.ui-button) * * @layer      variables, components * @requires   layers.css, _variables.css, _reset.css, kbd.css (--ui-kbd-*) * @uses       color-mix(), oklch(from …) — variant hover/active tints * @uses       text-box — vertical trim (patchy browser support) * @tokens     --ui-button-* (@layer variables) * @consumedby toggle.css (reads the --ui-button-* token family) */@layer variables {  :root {    --ui-button-ring-color: var(--ring-color);    --ui-button-font-family: var(--font-family-body);    --ui-button-font-size: var(--font-size-sm);    --ui-button-font-weight: var(--font-weight-strong);    --ui-button-line-height: 1;    --ui-button-background: var(--card);    --ui-button-background--hover: var(--muted);    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid var(--border);    --ui-button-border--hover: 1px solid var(--border);    --ui-button-border--active: 1px solid var(--border);    --ui-button-gap: var(--step-1);    --ui-button-padding: var(--step-2_5);    --ui-button-height: var(--step-8);    --ui-button-radius: var(--radius-md);    --ui-button-icon-size: var(--step-4);    /* composes into the button's box-shadow list — use a transparent shadow,       never `none`, so the focus ring layers stay valid */    --ui-button-shadow: 0 0 transparent;  }}@layer zazz.components {  /* ===========================================================================  BUTTON  =========================================================================== */  .ui-button {    font-family: var(--ui-button-font-family);    font-size: var(--ui-button-font-size);    font-weight: var(--ui-button-font-weight);    line-height: var(--ui-button-line-height);    display: flex;    align-items: center;    justify-content: center;    column-gap: var(--ui-button-gap);    flex-shrink: 0;    min-block-size: var(--ui-button-height);    min-inline-size: max-content;    padding-inline: var(--ui-button-padding);    border: var(--ui-button-border);    border-radius: var(--ui-button-radius);    color: var(--ui-button-foreground);    background-color: var(--ui-button-background);    background-clip: padding-box;    /* ring renders as box-shadow so it composes with --ui-button-shadow; the       ring widths animate from 0 so the ring grows in smoothly on focus */    --_ring-offset-width: 0px;    --_ring-width: 0px;    --_ring: color-mix(in oklch, var(--ui-button-ring-color) var(--ring-opacity), transparent);    box-shadow:      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),      var(--ui-button-shadow);    cursor: default;    text-decoration: none;    /* transparent twin of the ring for forced-colors / high-contrast modes */    outline: var(--outline-width) var(--outline-style) transparent;    outline-offset: var(--outline-offset);    transition: var(--default-transition);    user-select: none;    text-box: trim-both ex alphabetic;  }  a[href] .ui-button:not(:disabled, [aria-disabled="true"]),  a[href].ui-button:not(:disabled, [aria-disabled="true"]) {    cursor: pointer;  }  /* ===========================================================================  BUTTON STATES  =========================================================================== */  .ui-button:hover:not(:disabled, [aria-disabled="true"]) {    color: var(--ui-button-foreground--hover);    background-color: var(--ui-button-background--hover);    border: var(--ui-button-border--hover);  }  .ui-button:active:not(:disabled, [aria-disabled="true"]) {    color: var(--ui-button-foreground--active);    background-color: var(--ui-button-background--active);    border: var(--ui-button-border--active);  }  .ui-button:focus-visible:not(:disabled, [aria-disabled="true"]) {    --_ring-offset-width: var(--ring-offset-width);    --_ring-width: var(--ring-width);    outline-color: transparent;  }  :is(.ui-button:disabled, .ui-button[aria-disabled="true"]) {    --ui-button-foreground: var(--muted-foreground);    --ui-button-background: var(--muted);    --ui-button-shadow: 0 0 transparent;    --decoration-line: none;    cursor: default;    opacity: 0.5;    outline: none;  }  .ui-button[aria-busy="true"] {    cursor: progress;  }  /* ===========================================================================  BUTTON ICONS  =========================================================================== */  .ui-button > svg {    inline-size: var(--ui-button-icon-size);    block-size: var(--ui-button-icon-size);    pointer-events: none;    justify-content: center;    align-items: center;    display: flex;    padding: 0;  }  /* ===========================================================================  BUTTON VARIANTS  =========================================================================== */  .ui-button[data-variant="primary"] {    --ui-button-background: var(--primary);    --ui-button-background--hover: oklch(from var(--primary) l c h / 0.9);    --ui-button-background--active: oklch(from var(--primary) l c h / 0.8);    --ui-button-foreground: var(--primary-foreground);    --ui-button-foreground--hover: var(--primary-foreground);    --ui-button-foreground--active: var(--primary-foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="muted"] {    --ui-button-background: var(--muted);    --ui-button-background--hover: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-background--active: var(--muted);    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="ghost"] {    --ui-button-background: transparent;    --ui-button-background--hover: var(--muted);    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="destructive"] {    --ui-button-ring-color: var(--destructive);    --ui-button-background: var(--destructive);    --ui-button-background--hover: oklch(from var(--destructive) l c h / 0.9);    --ui-button-background--active: oklch(from var(--destructive) l c h / 0.8);    --ui-button-foreground: var(--destructive-foreground);    --ui-button-foreground--hover: var(--destructive-foreground);    --ui-button-foreground--active: var(--destructive-foreground);    --ui-button-border: 1px solid var(--destructive);    --ui-button-border--hover: 1px solid var(--destructive);    --ui-button-border--active: 1px solid var(--destructive);    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="link"] {    --ui-button-background: transparent;    --ui-button-background--hover: transparent;    --ui-button-background--active: transparent;    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--primary);    --ui-button-foreground--active: oklch(from var(--primary) l c h / 0.8);    --ui-button-border: none;    --ui-button-border--hover: none;    --ui-button-border--active: none;    --ui-button-height: fit-content;    --ui-button-padding: 0;    --ui-button-radius: 0;    --ui-button-shadow: 0 0 transparent;    text-decoration-line: var(--decoration-line);    text-decoration-style: var(--decoration-style);    text-decoration-color: var(--decoration-color);    text-underline-offset: var(--decoration-offset);    text-decoration-thickness: var(--decoration-thickness);  }  .ui-button[data-variant="link"]:hover:not(:disabled, [aria-disabled="true"]) {    text-decoration-color: var(--decoration-color--hover);    text-underline-offset: var(--decoration-offset--hover);  }  .ui-button[data-variant="link"]:active:not(:disabled, [aria-disabled="true"]) {    text-decoration-color: var(--decoration-color--active);    text-underline-offset: var(--decoration-offset--active);  }  /* ===========================================================================  BUTTON SIZES  =========================================================================== */  .ui-button[data-size="sm"] {    --ui-button-height: var(--step-6);    --ui-button-padding: var(--step-2);    --ui-button-radius: var(--radius-sm);  }  .ui-button[data-size="icon"] {    block-size: var(--ui-button-height);    inline-size: var(--ui-button-height);    padding: 0;    aspect-ratio: 1 / 1;  }  .ui-button[data-size="icon-sm"] {    --ui-button-height: var(--step-6);    --ui-button-padding: var(--step-2);    --ui-button-radius: var(--radius-sm);    --ui-button-icon-size: var(--step-3_5);    block-size: var(--ui-button-height);    inline-size: var(--ui-button-height);    padding: 0;    aspect-ratio: 1 / 1;  }  /* ===========================================================================  BUTTON KBD  =========================================================================== */  /* Descendant (not child) so keys wrapped in a ui-kbd-group still resize */  .ui-button :where(kbd) {    --ui-kbd-min-inline-size: var(--step-4_5);    --ui-kbd-min-block-size: var(--step-4_5);    --ui-kbd-icon-size: var(--step-3);  }  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)) {    padding-inline-end: var(--step-1_5);  }  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)) {    padding-inline-start: var(--step-1_5);  }  .ui-button[data-size="sm"]:has(    > :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)  ) {    padding-inline-end: var(--step-0_5);  }  .ui-button[data-size="sm"]:has(    > :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)  ) {    padding-inline-start: var(--step-0_5);  }}

Icon-only

Use data-size="icon" or data-size="icon-sm" for square buttons:

Loading components…

<div class="flex items-center gap-sm">  <button type="button" class="ui-button" data-size="icon" aria-label="Open menu">    <svg      xmlns="http://www.w3.org/2000/svg"      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      stroke-width="2"      stroke-linecap="round"      stroke-linejoin="round"      aria-hidden="true"    >      <line x1="4" y1="6" x2="20" y2="6" />      <line x1="4" y1="12" x2="20" y2="12" />      <line x1="4" y1="18" x2="20" y2="18" />    </svg>  </button>  <button    type="button"    class="ui-button"    data-variant="primary"    data-size="icon"    aria-label="Open menu"  >    <svg      xmlns="http://www.w3.org/2000/svg"      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      stroke-width="2"      stroke-linecap="round"      stroke-linejoin="round"      aria-hidden="true"    >      <line x1="4" y1="6" x2="20" y2="6" />      <line x1="4" y1="12" x2="20" y2="12" />      <line x1="4" y1="18" x2="20" y2="18" />    </svg>  </button>  <button    type="button"    class="ui-button"    data-variant="muted"    data-size="icon"    aria-label="Open menu"  >    <svg      xmlns="http://www.w3.org/2000/svg"      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      stroke-width="2"      stroke-linecap="round"      stroke-linejoin="round"      aria-hidden="true"    >      <line x1="4" y1="6" x2="20" y2="6" />      <line x1="4" y1="12" x2="20" y2="12" />      <line x1="4" y1="18" x2="20" y2="18" />    </svg>  </button>  <button    type="button"    class="ui-button"    data-variant="ghost"    data-size="icon"    aria-label="Open menu"  >    <svg      xmlns="http://www.w3.org/2000/svg"      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      stroke-width="2"      stroke-linecap="round"      stroke-linejoin="round"      aria-hidden="true"    >      <line x1="4" y1="6" x2="20" y2="6" />      <line x1="4" y1="12" x2="20" y2="12" />      <line x1="4" y1="18" x2="20" y2="18" />    </svg>  </button></div>

/** * button.css — Button (.ui-button) * * @layer      variables, components * @requires   layers.css, _variables.css, _reset.css, kbd.css (--ui-kbd-*) * @uses       color-mix(), oklch(from …) — variant hover/active tints * @uses       text-box — vertical trim (patchy browser support) * @tokens     --ui-button-* (@layer variables) * @consumedby toggle.css (reads the --ui-button-* token family) */@layer variables {  :root {    --ui-button-ring-color: var(--ring-color);    --ui-button-font-family: var(--font-family-body);    --ui-button-font-size: var(--font-size-sm);    --ui-button-font-weight: var(--font-weight-strong);    --ui-button-line-height: 1;    --ui-button-background: var(--card);    --ui-button-background--hover: var(--muted);    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid var(--border);    --ui-button-border--hover: 1px solid var(--border);    --ui-button-border--active: 1px solid var(--border);    --ui-button-gap: var(--step-1);    --ui-button-padding: var(--step-2_5);    --ui-button-height: var(--step-8);    --ui-button-radius: var(--radius-md);    --ui-button-icon-size: var(--step-4);    /* composes into the button's box-shadow list — use a transparent shadow,       never `none`, so the focus ring layers stay valid */    --ui-button-shadow: 0 0 transparent;  }}@layer zazz.components {  /* ===========================================================================  BUTTON  =========================================================================== */  .ui-button {    font-family: var(--ui-button-font-family);    font-size: var(--ui-button-font-size);    font-weight: var(--ui-button-font-weight);    line-height: var(--ui-button-line-height);    display: flex;    align-items: center;    justify-content: center;    column-gap: var(--ui-button-gap);    flex-shrink: 0;    min-block-size: var(--ui-button-height);    min-inline-size: max-content;    padding-inline: var(--ui-button-padding);    border: var(--ui-button-border);    border-radius: var(--ui-button-radius);    color: var(--ui-button-foreground);    background-color: var(--ui-button-background);    background-clip: padding-box;    /* ring renders as box-shadow so it composes with --ui-button-shadow; the       ring widths animate from 0 so the ring grows in smoothly on focus */    --_ring-offset-width: 0px;    --_ring-width: 0px;    --_ring: color-mix(in oklch, var(--ui-button-ring-color) var(--ring-opacity), transparent);    box-shadow:      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),      var(--ui-button-shadow);    cursor: default;    text-decoration: none;    /* transparent twin of the ring for forced-colors / high-contrast modes */    outline: var(--outline-width) var(--outline-style) transparent;    outline-offset: var(--outline-offset);    transition: var(--default-transition);    user-select: none;    text-box: trim-both ex alphabetic;  }  a[href] .ui-button:not(:disabled, [aria-disabled="true"]),  a[href].ui-button:not(:disabled, [aria-disabled="true"]) {    cursor: pointer;  }  /* ===========================================================================  BUTTON STATES  =========================================================================== */  .ui-button:hover:not(:disabled, [aria-disabled="true"]) {    color: var(--ui-button-foreground--hover);    background-color: var(--ui-button-background--hover);    border: var(--ui-button-border--hover);  }  .ui-button:active:not(:disabled, [aria-disabled="true"]) {    color: var(--ui-button-foreground--active);    background-color: var(--ui-button-background--active);    border: var(--ui-button-border--active);  }  .ui-button:focus-visible:not(:disabled, [aria-disabled="true"]) {    --_ring-offset-width: var(--ring-offset-width);    --_ring-width: var(--ring-width);    outline-color: transparent;  }  :is(.ui-button:disabled, .ui-button[aria-disabled="true"]) {    --ui-button-foreground: var(--muted-foreground);    --ui-button-background: var(--muted);    --ui-button-shadow: 0 0 transparent;    --decoration-line: none;    cursor: default;    opacity: 0.5;    outline: none;  }  .ui-button[aria-busy="true"] {    cursor: progress;  }  /* ===========================================================================  BUTTON ICONS  =========================================================================== */  .ui-button > svg {    inline-size: var(--ui-button-icon-size);    block-size: var(--ui-button-icon-size);    pointer-events: none;    justify-content: center;    align-items: center;    display: flex;    padding: 0;  }  /* ===========================================================================  BUTTON VARIANTS  =========================================================================== */  .ui-button[data-variant="primary"] {    --ui-button-background: var(--primary);    --ui-button-background--hover: oklch(from var(--primary) l c h / 0.9);    --ui-button-background--active: oklch(from var(--primary) l c h / 0.8);    --ui-button-foreground: var(--primary-foreground);    --ui-button-foreground--hover: var(--primary-foreground);    --ui-button-foreground--active: var(--primary-foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="muted"] {    --ui-button-background: var(--muted);    --ui-button-background--hover: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-background--active: var(--muted);    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="ghost"] {    --ui-button-background: transparent;    --ui-button-background--hover: var(--muted);    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--foreground);    --ui-button-foreground--active: var(--foreground);    --ui-button-border: 1px solid transparent;    --ui-button-border--hover: 1px solid transparent;    --ui-button-border--active: 1px solid transparent;    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="destructive"] {    --ui-button-ring-color: var(--destructive);    --ui-button-background: var(--destructive);    --ui-button-background--hover: oklch(from var(--destructive) l c h / 0.9);    --ui-button-background--active: oklch(from var(--destructive) l c h / 0.8);    --ui-button-foreground: var(--destructive-foreground);    --ui-button-foreground--hover: var(--destructive-foreground);    --ui-button-foreground--active: var(--destructive-foreground);    --ui-button-border: 1px solid var(--destructive);    --ui-button-border--hover: 1px solid var(--destructive);    --ui-button-border--active: 1px solid var(--destructive);    --ui-button-shadow: 0 0 transparent;  }  .ui-button[data-variant="link"] {    --ui-button-background: transparent;    --ui-button-background--hover: transparent;    --ui-button-background--active: transparent;    --ui-button-foreground: var(--foreground);    --ui-button-foreground--hover: var(--primary);    --ui-button-foreground--active: oklch(from var(--primary) l c h / 0.8);    --ui-button-border: none;    --ui-button-border--hover: none;    --ui-button-border--active: none;    --ui-button-height: fit-content;    --ui-button-padding: 0;    --ui-button-radius: 0;    --ui-button-shadow: 0 0 transparent;    text-decoration-line: var(--decoration-line);    text-decoration-style: var(--decoration-style);    text-decoration-color: var(--decoration-color);    text-underline-offset: var(--decoration-offset);    text-decoration-thickness: var(--decoration-thickness);  }  .ui-button[data-variant="link"]:hover:not(:disabled, [aria-disabled="true"]) {    text-decoration-color: var(--decoration-color--hover);    text-underline-offset: var(--decoration-offset--hover);  }  .ui-button[data-variant="link"]:active:not(:disabled, [aria-disabled="true"]) {    text-decoration-color: var(--decoration-color--active);    text-underline-offset: var(--decoration-offset--active);  }  /* ===========================================================================  BUTTON SIZES  =========================================================================== */  .ui-button[data-size="sm"] {    --ui-button-height: var(--step-6);    --ui-button-padding: var(--step-2);    --ui-button-radius: var(--radius-sm);  }  .ui-button[data-size="icon"] {    block-size: var(--ui-button-height);    inline-size: var(--ui-button-height);    padding: 0;    aspect-ratio: 1 / 1;  }  .ui-button[data-size="icon-sm"] {    --ui-button-height: var(--step-6);    --ui-button-padding: var(--step-2);    --ui-button-radius: var(--radius-sm);    --ui-button-icon-size: var(--step-3_5);    block-size: var(--ui-button-height);    inline-size: var(--ui-button-height);    padding: 0;    aspect-ratio: 1 / 1;  }  /* ===========================================================================  BUTTON KBD  =========================================================================== */  /* Descendant (not child) so keys wrapped in a ui-kbd-group still resize */  .ui-button :where(kbd) {    --ui-kbd-min-inline-size: var(--step-4_5);    --ui-kbd-min-block-size: var(--step-4_5);    --ui-kbd-icon-size: var(--step-3);  }  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)) {    padding-inline-end: var(--step-1_5);  }  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)) {    padding-inline-start: var(--step-1_5);  }  .ui-button[data-size="sm"]:has(    > :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)  ) {    padding-inline-end: var(--step-0_5);  }  .ui-button[data-size="sm"]:has(    > :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)  ) {    padding-inline-start: var(--step-0_5);  }}

With keyboard shortcuts

Add a <kbd> element inside the button for shortcut keys. Wrap a run of keys in a <ui-kbd-group> so their spacing stays consistent:

<button class="ui-button">
  Search
  <ui-kbd-group><kbd>⌘</kbd><kbd>K</kbd></ui-kbd-group>
</button>

API

Attribute	Values
`data-variant`	`primary`, `muted`, `ghost`, `destructive`, `link` (omit = default)
`data-size`	`sm`, `icon`, `icon-sm`

Customize buttons globally by overriding --ui-button-background, --ui-button-radius, --ui-button-height, etc. on :root.

Button

Variants

With icons

Icon-only

With keyboard shortcuts

API

On this page