feat(Button): extra small variants

src/components/Button.tsx

@@ -5,7 +5,7 @@ import { controlClassName } from "../utils/controlClassName";
 
 export interface ButtonProps extends React.ComponentPropsWithRef<"button"> {
   render?: (props: React.ComponentPropsWithRef<"button">) => React.ReactNode;
-  size?: "auto" | "sm" | "md" | "lg";
+  size?: "auto" | "xs" | "sm" | "md" | "lg";
   iconStart?: React.ReactNode;
   iconEnd?: React.ReactNode;
   shape?: "rectangle" | "pill" | "square" | "circle";
@@ -37,6 +37,7 @@ export const Button = forwardRef(function Button(
       size !== "auto" &&
         clsx(
           "inline-flex items-center justify-center text-center",
+          size === "xs" && "gap-0.5",
           size === "sm" && "gap-1",
           size === "md" && "gap-1",
           size === "lg" && "gap-1.5",

src/components/ButtonPlain.stories.tsx

@@ -39,6 +39,7 @@ export const Sizes = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonPlain size="xs">Extra small</ButtonPlain>
       <ButtonPlain size="sm">Small</ButtonPlain>
       <ButtonPlain size="md">Medium</ButtonPlain>
       <ButtonPlain size="lg">Large</ButtonPlain>
@@ -50,6 +51,9 @@ export const WithIcon = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonPlain size="xs" iconStart={<PlusIcon16 className="size-4" />}>
+        Add item
+      </ButtonPlain>
       <ButtonPlain size="sm" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonPlain>

src/components/ButtonPlain.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonPlainProps extends ButtonProps {
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   shape?: "rectangle" | "pill" | "square" | "circle";
   color?: "neutral" | "accent";
 }
@@ -20,6 +20,7 @@ export const ButtonPlain = forwardRef(function ButtonPlain(
       className={clsx(
         className,
         "font-medium",
+        size === "xs" && "px-1.5",
         size === "sm" && "px-2.5",
         size === "md" && "px-3",
         size === "lg" && "px-4",

src/components/ButtonPrimary.stories.tsx

@@ -39,6 +39,7 @@ export const Sizes = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonPrimary size="xs">Extra small</ButtonPrimary>
       <ButtonPrimary size="sm">Small</ButtonPrimary>
       <ButtonPrimary size="md">Medium</ButtonPrimary>
       <ButtonPrimary size="lg">Large</ButtonPrimary>
@@ -50,6 +51,9 @@ export const WithIcon = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonPrimary size="xs" iconStart={<PlusIcon16 className="size-4" />}>
+        Add item
+      </ButtonPrimary>
       <ButtonPrimary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonPrimary>

src/components/ButtonPrimary.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonPrimaryProps extends ButtonProps {
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   shape?: "rectangle" | "pill" | "square" | "circle";
   color?: "neutral" | "accent";
 }
@@ -20,6 +20,7 @@ export const ButtonPrimary = forwardRef(function ButtonPrimary(
       className={clsx(
         className,
         "font-medium",
+        size === "xs" && "px-1.5",
         size === "sm" && "px-2.5",
         size === "md" && "px-4",
         size === "lg" && "px-6",

src/components/ButtonSecondary.stories.tsx

@@ -39,6 +39,7 @@ export const Sizes = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonSecondary size="xs">Extra small</ButtonSecondary>
       <ButtonSecondary size="sm">Small</ButtonSecondary>
       <ButtonSecondary size="md">Medium</ButtonSecondary>
       <ButtonSecondary size="lg">Large</ButtonSecondary>
@@ -50,6 +51,9 @@ export const WithIcon = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonSecondary size="xs" iconStart={<PlusIcon16 className="size-4" />}>
+        Add item
+      </ButtonSecondary>
       <ButtonSecondary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonSecondary>

src/components/ButtonSecondary.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonSecondaryProps extends ButtonProps {
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   shape?: "rectangle" | "pill" | "square" | "circle";
   color?: "neutral" | "danger";
 }
@@ -20,6 +20,7 @@ export const ButtonSecondary = forwardRef(function ButtonSecondary(
       className={clsx(
         className,
         "font-medium",
+        size === "xs" && "px-1.5",
         size === "sm" && "px-2.5",
         size === "md" && "px-4",
         size === "lg" && "px-6",

src/components/ButtonTertiary.stories.tsx

@@ -39,6 +39,7 @@ export const Sizes = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonTertiary size="xs">Extra small</ButtonTertiary>
       <ButtonTertiary size="sm">Small</ButtonTertiary>
       <ButtonTertiary size="md">Medium</ButtonTertiary>
       <ButtonTertiary size="lg">Large</ButtonTertiary>
@@ -50,6 +51,9 @@ export const WithIcon = {
   ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
+      <ButtonTertiary size="xs" iconStart={<PlusIcon16 className="size-4" />}>
+        Add item
+      </ButtonTertiary>
       <ButtonTertiary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonTertiary>

src/components/ButtonTertiary.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonTertiaryProps extends ButtonProps {
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   shape?: "rectangle" | "pill" | "square" | "circle";
   color?: "neutral" | "accent" | "danger";
 }
@@ -20,6 +20,7 @@ export const ButtonTertiary = forwardRef(function ButtonTertiary(
       className={clsx(
         className,
         "font-medium ring-1 ring-inset ring-ui-neutral-300",
+        size === "xs" && "px-1.5",
         size === "sm" && "px-2.5",
         size === "md" && "px-4",
         size === "lg" && "px-6",

src/utils/controlClassName.ts

@@ -1,7 +1,7 @@
 import { clsx } from "clsx/lite";
 
 interface ControlProps {
-  size: "auto" | "sm" | "md" | "lg";
+  size: "auto" | "xs" | "sm" | "md" | "lg";
   shape: "rectangle" | "pill" | "square" | "circle";
 }
 
@@ -12,12 +12,14 @@ function isEquilateral(shape: ControlProps["shape"]) {
 export function controlClassName({ size, shape }: ControlProps) {
   return clsx(
     "transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ui-accent-600 disabled:pointer-events-none disabled:opacity-35",
+    size === "xs" && clsx("h-6 text-sm/none", isEquilateral(shape) && "w-6"),
     size === "sm" && clsx("h-8 text-base/none", isEquilateral(shape) && "w-8"),
     size === "md" &&
       clsx("h-10 text-base/none", isEquilateral(shape) && "w-10"),
     size === "lg" && clsx("h-14 text-xl/none", isEquilateral(shape) && "w-14"),
     (shape === "rectangle" || shape === "square") &&
       clsx(
+        size === "xs" && "rounded",
         size === "sm" && "rounded-md",
         size === "md" && "rounded-lg",
         size === "lg" && "rounded-xl",