@youcan/celeste 0.23.0 → 0.24.0

package/dist/cjs/chunks/button.cjs

@@ -18,6 +18,8 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
 		size: { default: "md" },
 		intent: { default: "primary" },
 		variant: { default: "fill" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -27,13 +29,17 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, __props.loading && !__props.asChild && "celeste-button-loading", props.class))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+				default: (0, vue.withCtx)(() => [__props.asChild ? (0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true, 0) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = (0, vue.createElementVNode)("i", { class: "celeste-button-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
@@ -41,7 +47,7 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
 });
 //#endregion
 //#region src/components/button/button.vue
-var button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0aeead06"]]);
+var button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-30b82d15"]]);
 //#endregion
 Object.defineProperty(exports, "button_default", {
 	enumerable: true,

package/dist/cjs/chunks/compact-button.cjs

@@ -42,7 +42,7 @@ var compact_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (
 });
 //#endregion
 //#region src/components/button/compact-button.vue
-var compact_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(compact_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bcc27daf"]]);
+var compact_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(compact_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0727facf"]]);
 //#endregion
 Object.defineProperty(exports, "compact_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/fancy-button.cjs

@@ -17,6 +17,8 @@ var fancy_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 		] },
 		size: { default: "md" },
 		intent: { default: "primary" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -26,13 +28,17 @@ var fancy_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, __props.loading && !__props.asChild && "celeste-fbutton-loading", props.class))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+				default: (0, vue.withCtx)(() => [__props.asChild ? (0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true, 0) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = (0, vue.createElementVNode)("i", { class: "celeste-fbutton-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
@@ -40,7 +46,7 @@ var fancy_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 });
 //#endregion
 //#region src/components/button/fancy-button.vue
-var fancy_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(fancy_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d53adf47"]]);
+var fancy_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(fancy_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9098298e"]]);
 //#endregion
 Object.defineProperty(exports, "fancy_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/social-button.cjs

@@ -34,7 +34,7 @@ var social_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/button/social-button.vue
-var social_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(social_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3652f72b"]]);
+var social_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(social_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-85544f28"]]);
 //#endregion
 Object.defineProperty(exports, "social_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input-button.cjs

@@ -17,6 +17,8 @@ var text_input_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			Array
 		] },
 		intent: {},
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: {},
 		inline: {

package/dist/components/button/button.d.ts

@@ -5,10 +5,14 @@ export interface ButtonProps extends PrimitiveProps {
     size?: 'xxs' | 'xs' | 'sm' | 'md';
     intent?: 'primary' | 'neutral' | 'error';
     variant?: 'fill' | 'stroke' | 'lighter' | 'ghost';
+    disabled?: boolean;
+    loading?: boolean;
 }
-declare var __VLS_8: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     size: "xxs" | "xs" | "sm" | "md";

package/dist/components/button/fancy-button.d.ts

@@ -4,10 +4,14 @@ export interface FancyButtonProps extends PrimitiveProps {
     class?: HTMLAttributes['class'];
     size?: 'xs' | 'sm' | 'md';
     intent?: 'primary' | 'neutral' | 'error' | 'basic';
+    disabled?: boolean;
+    loading?: boolean;
 }
-declare var __VLS_8: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<FancyButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FancyButtonProps> & Readonly<{}>, {
     size: "xs" | "sm" | "md";

package/dist/es/chunks/button.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
 import clsx$1 from "clsx";
 import { Primitive } from "reka-ui";
 //#endregion
@@ -17,6 +17,8 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		size: { default: "md" },
 		intent: { default: "primary" },
 		variant: { default: "fill" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -26,17 +28,21 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			return openBlock(), createBlock(unref(Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: normalizeClass(unref(clsx$1)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: normalizeClass(unref(clsx$1)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, __props.loading && !__props.asChild && "celeste-button-loading", props.class))
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				default: withCtx(() => [__props.asChild ? renderSlot(_ctx.$slots, "default", {}, void 0, true, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [renderSlot(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = createElementVNode("i", { class: "celeste-button-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-0aeead06"]]);
+}), [["__scopeId", "data-v-30b82d15"]]);
 //#endregion
 export { button_default as t };

package/dist/es/chunks/compact-button.js

@@ -38,6 +38,6 @@ var compact_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-bcc27daf"]]);
+}), [["__scopeId", "data-v-0727facf"]]);
 //#endregion
 export { compact_button_default as t };

package/dist/es/chunks/fancy-button.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
 import clsx$1 from "clsx";
 import { Primitive } from "reka-ui";
 //#endregion
@@ -16,6 +16,8 @@ var fancy_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		] },
 		size: { default: "md" },
 		intent: { default: "primary" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -25,17 +27,21 @@ var fancy_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return openBlock(), createBlock(unref(Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: normalizeClass(unref(clsx$1)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: normalizeClass(unref(clsx$1)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, __props.loading && !__props.asChild && "celeste-fbutton-loading", props.class))
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				default: withCtx(() => [__props.asChild ? renderSlot(_ctx.$slots, "default", {}, void 0, true, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [renderSlot(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = createElementVNode("i", { class: "celeste-fbutton-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-d53adf47"]]);
+}), [["__scopeId", "data-v-9098298e"]]);
 //#endregion
 export { fancy_button_default as t };

package/dist/es/chunks/social-button.js

@@ -31,6 +31,6 @@ var social_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, 8, ["aria-label", "class"]);
 		};
 	}
-}), [["__scopeId", "data-v-3652f72b"]]);
+}), [["__scopeId", "data-v-85544f28"]]);
 //#endregion
 export { social_button_default as t };

package/dist/es/chunks/text-input-button.js

@@ -16,6 +16,8 @@ var text_input_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			Array
 		] },
 		intent: {},
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: {},
 		inline: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -52,8 +52,8 @@
     "reka-ui": "~2.10.5",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-tokens": "0.23.0",
-    "@youcan/celeste-icons": "0.23.0"
+    "@youcan/celeste-icons": "0.24.0",
+    "@youcan/celeste-tokens": "0.24.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

package/src/components/button/button.vue

@@ -9,6 +9,8 @@ export interface ButtonProps extends PrimitiveProps {
   size?: 'xxs' | 'xs' | 'sm' | 'md';
   intent?: 'primary' | 'neutral' | 'error';
   variant?: 'fill' | 'stroke' | 'lighter' | 'ghost';
+  disabled?: boolean;
+  loading?: boolean;
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -23,15 +25,22 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   <Primitive
     :as
     :as-child
+    :disabled="disabled || loading || undefined"
+    :aria-busy="loading || undefined"
     :class="clsx(
       'celeste-button',
       `celeste-button-intent-${intent}`,
       `celeste-button-size-${size}`,
       `celeste-button-variant-${variant}`,
+      loading && !asChild && 'celeste-button-loading',
       props.class,
     )"
   >
-    <slot />
+    <slot v-if="asChild" />
+    <template v-else>
+      <slot />
+      <i class="celeste-button-spinner i-celeste-loader-5-line" />
+    </template>
   </Primitive>
 </template>
 
@@ -216,6 +225,7 @@ $hover-map: (
 
 .celeste-button {
   display: inline-flex;
+  position: relative;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
@@ -229,8 +239,9 @@ $hover-map: (
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
+  user-select: none;
 
-  &:disabled {
+  &:disabled:not(&-loading) {
     background-color: var(--color-bg-weak-50);
     color: var(--color-text-disabled-300);
     cursor: default;
@@ -249,7 +260,8 @@ $hover-map: (
       padding: map.get($v, padding);
       border-radius: map.get($v, border-radius);
 
-      &:has(> :only-child:is(i)) {
+      &:has(> :only-child:is(i):not(.celeste-button-spinner)),
+      &:has(> i:first-child + .celeste-button-spinner:last-child) {
         padding: list.nth(map.get($v, padding), 1);
       }
     }
@@ -257,11 +269,17 @@ $hover-map: (
 
   @each $intent, $sub in $intent-map {
     @each $variant, $values in $sub {
-      &-intent-#{$intent}:not(:disabled).celeste-button-variant-#{$variant}:not(:disabled) {
+      &-intent-#{$intent}.celeste-button-variant-#{$variant}:not(:disabled:not(.celeste-button-loading)) {
+        --celeste-button-fg: #{map.get($values, fg)};
+
         border-color: map.get($values, border);
         background-color: map.get($values, bg);
         box-shadow: map.get($values, shadow);
-        color: map.get($values, fg);
+        color: var(--celeste-button-fg);
+
+        &.celeste-button-loading {
+          color: transparent;
+        }
 
         &:hover:not(:disabled) {
           $hover-values: map.get(map.get($hover-map, $intent), $variant);
@@ -283,4 +301,40 @@ $hover-map: (
     }
   }
 }
+
+.celeste-button-loading {
+  pointer-events: none;
+}
+
+.celeste-button-spinner {
+  position: absolute;
+  margin: auto;
+  transition-property: opacity, scale;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  animation: celeste-button-spin 600ms linear infinite paused;
+  opacity: 0;
+  color: var(--celeste-button-fg);
+  inset: 0;
+  scale: 0.9;
+}
+
+.celeste-button-loading > .celeste-button-spinner {
+  animation-play-state: running;
+  opacity: 1;
+  scale: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .celeste-button-spinner {
+    animation-duration: 1200ms;
+    scale: 1;
+  }
+}
+
+@keyframes celeste-button-spin {
+  100% {
+    rotate: 360deg;
+  }
+}
 </style>

package/src/components/button/compact-button.vue

@@ -51,6 +51,7 @@ const props = withDefaults(defineProps<CompactButtonProps>(), {
   font: var(--label-sm);
   text-decoration: none;
   cursor: pointer;
+  user-select: none;
   gap: var(--spacing-2);
 
   &:disabled {

package/src/components/button/fancy-button.vue

@@ -8,6 +8,8 @@ export interface FancyButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   size?: 'xs' | 'sm' | 'md';
   intent?: 'primary' | 'neutral' | 'error' | 'basic';
+  disabled?: boolean;
+  loading?: boolean;
 }
 
 const props = withDefaults(defineProps<FancyButtonProps>(), {
@@ -21,14 +23,21 @@ const props = withDefaults(defineProps<FancyButtonProps>(), {
   <Primitive
     :as
     :as-child
+    :disabled="disabled || loading || undefined"
+    :aria-busy="loading || undefined"
     :class="clsx(
       'celeste-fbutton',
       `celeste-fbutton-${intent}`,
       `celeste-fbutton-${size}`,
+      loading && !asChild && 'celeste-fbutton-loading',
       props.class,
     )"
   >
-    <slot />
+    <slot v-if="asChild" />
+    <template v-else>
+      <slot />
+      <i class="celeste-fbutton-spinner i-celeste-loader-5-line" />
+    </template>
   </Primitive>
 </template>
 
@@ -95,8 +104,9 @@ $intent-map: (
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
+  user-select: none;
 
-  &:disabled {
+  &:disabled:not(&-loading) {
     background-color: var(--color-bg-weak-50);
     color: var(--color-text-disabled-300);
     cursor: default;
@@ -122,7 +132,8 @@ $intent-map: (
   }
 
   @each $k, $v in $intent-map {
-    &-#{$k}:not(&-basic, :disabled) {
+    &-#{$k}:not(&-basic, :disabled:not(&-loading)) {
+      --celeste-fbutton-fg: #{if($k == 'neutral', var(--color-text-white-0), var(--color-static-white))};
       --celeste-fbutton-bg-start: rgb(255 255 255 / 16%);
       --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
 
@@ -130,7 +141,11 @@ $intent-map: (
         linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%),
         #{map.get($v, bg)};
       box-shadow: var(--shadow-fancy-buttons-#{$k});
-      color: if($k == 'neutral', var(--color-text-white-0), var(--color-static-white));
+      color: var(--celeste-fbutton-fg);
+
+      &.celeste-fbutton-loading {
+        color: transparent;
+      }
 
       &::before {
         content: '';
@@ -161,9 +176,15 @@ $intent-map: (
   }
 
   &-basic {
+    --celeste-fbutton-fg: var(--color-text-sub-600);
+
     background: var(--color-bg-white-0);
     box-shadow: var(--shadow-fancy-buttons-stroke);
-    color: var(--color-text-sub-600);
+    color: var(--celeste-fbutton-fg);
+
+    &.celeste-fbutton-loading {
+      color: transparent;
+    }
 
     &:hover {
       background: var(--color-bg-weak-50);
@@ -178,4 +199,40 @@ $intent-map: (
     }
   }
 }
+
+.celeste-fbutton-loading {
+  pointer-events: none;
+}
+
+.celeste-fbutton-spinner {
+  position: absolute;
+  margin: auto;
+  transition-property: opacity, scale;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  animation: celeste-fbutton-spin 600ms linear infinite paused;
+  opacity: 0;
+  color: var(--celeste-fbutton-fg);
+  inset: 0;
+  scale: 0.9;
+}
+
+.celeste-fbutton-loading > .celeste-fbutton-spinner {
+  animation-play-state: running;
+  opacity: 1;
+  scale: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .celeste-fbutton-spinner {
+    animation-duration: 1200ms;
+    scale: 1;
+  }
+}
+
+@keyframes celeste-fbutton-spin {
+  100% {
+    rotate: 360deg;
+  }
+}
 </style>

package/src/components/button/social-button.vue

@@ -82,6 +82,7 @@ $brand-map: (
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
+  user-select: none;
   gap: var(--spacing-8);
 
   span {

package/src/components/button/stories/button.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
 import Button from '../button.vue';
 
 const meta: Meta<typeof Button> = {
@@ -49,3 +50,30 @@ export const IconOnly: Story = {
     `,
   }),
 };
+
+export const Loading: Story = {
+  args: {
+    size: 'md',
+    intent: 'primary',
+  },
+
+  render: args => ({
+    components: { Button },
+    setup() {
+      const loading = ref(false);
+
+      function save(): void {
+        loading.value = true;
+        setTimeout(() => loading.value = false, 3000);
+      }
+
+      return { args, loading, save };
+    },
+    template: `
+      <Button v-bind="args" :loading="loading" @click="save">
+        Save changes
+        <i class="i-celeste-check-line"></i>
+      </Button>
+    `,
+  }),
+};

package/src/components/button/stories/fancy-button.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
 import FancyButton from '../fancy-button.vue';
 
 const meta: Meta<typeof FancyButton> = {
@@ -29,3 +30,30 @@ export const Default: Story = {
     `,
   }),
 };
+
+export const Loading: Story = {
+  args: {
+    size: 'md',
+    intent: 'primary',
+  },
+
+  render: args => ({
+    components: { FancyButton },
+    setup() {
+      const loading = ref(false);
+
+      function save(): void {
+        loading.value = true;
+        setTimeout(() => loading.value = false, 3000);
+      }
+
+      return { args, loading, save };
+    },
+    template: `
+      <FancyButton v-bind="args" :loading="loading" @click="save">
+        Save changes
+        <i class="i-celeste-check-line"></i>
+      </FancyButton>
+    `,
+  }),
+};