Add v2 Button component
Implement the Button component from the Probo Radix UI Figma: a <button> with size 1-4, the classic/solid/soft/surface/outline/ghost variants across the sand/gold/red/green/amber/sky scales with highContrast, iconStart/iconEnd slots, and a loading state that shows only a spinner. Corner radius is bound to size per the design (radius is theme-global, not a per-instance prop). Includes a paired ButtonSkeleton. Styling uses tailwind-variants/lite. Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
130
packages/ui/src/v2/Button/Button.stories.tsx
Normal file
130
packages/ui/src/v2/Button/Button.stories.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
// Copyright (c) 2026 Probo Inc <hello@probo.com>.
|
||||
//
|
||||
// Permission to use, copy, modify, and/or distribute this software for any
|
||||
// purpose with or without fee is hereby granted, provided that the above
|
||||
// copyright notice and this permission notice appear in all copies.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
// PERFORMANCE OF THIS SOFTWARE.
|
||||
|
||||
import { ArrowRightIcon, BookmarkSimpleIcon } from "@phosphor-icons/react";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
|
||||
import { Button } from "./Button";
|
||||
import { ButtonSkeleton } from "./ButtonSkeleton";
|
||||
|
||||
const sizes = [1, 2, 3, 4] as const;
|
||||
const variants = ["classic", "solid", "soft", "surface", "outline", "ghost"] as const;
|
||||
const colors = ["neutral", "gold", "red", "green", "amber", "sky"] as const;
|
||||
|
||||
export default {
|
||||
title: "v2/Button",
|
||||
component: Button,
|
||||
args: {
|
||||
children: "Edit profile",
|
||||
size: 2,
|
||||
variant: "solid",
|
||||
color: "gold",
|
||||
highContrast: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
},
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
export const Playground: Story = {};
|
||||
|
||||
export const Sizes: Story = {
|
||||
render: () => (
|
||||
<div className="flex items-center gap-3">
|
||||
{sizes.map(size => (
|
||||
<Button key={size} size={size}>
|
||||
Edit profile
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Variants: Story = {
|
||||
render: () => (
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{variants.map(variant => (
|
||||
<Button key={variant} variant={variant}>
|
||||
{variant}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Colors: Story = {
|
||||
render: () => (
|
||||
<div className="flex flex-col gap-3">
|
||||
{variants.map(variant => (
|
||||
<div key={variant} className="flex items-center gap-3">
|
||||
{colors.map(color => (
|
||||
<Button key={color} variant={variant} color={color}>
|
||||
{color}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const HighContrast: Story = {
|
||||
render: () => (
|
||||
<div className="flex items-center gap-3">
|
||||
{colors.map(color => (
|
||||
<Button key={color} color={color} highContrast>
|
||||
{color}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const WithIcons: Story = {
|
||||
render: () => (
|
||||
<div className="flex items-center gap-3">
|
||||
<Button iconStart={<BookmarkSimpleIcon />}>Bookmark</Button>
|
||||
<Button variant="soft" color="neutral" iconEnd={<ArrowRightIcon />}>Next</Button>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Loading: Story = {
|
||||
render: () => (
|
||||
<div className="flex items-center gap-3">
|
||||
<Button loading>Saving</Button>
|
||||
<Button variant="soft" color="neutral" loading>Saving</Button>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Disabled: Story = {
|
||||
render: () => (
|
||||
<div className="flex items-center gap-3">
|
||||
<Button disabled>Solid</Button>
|
||||
<Button variant="soft" disabled>Soft</Button>
|
||||
<Button variant="outline" color="neutral" disabled>Outline</Button>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Skeleton: Story = {
|
||||
render: () => (
|
||||
<div className="flex items-center gap-3">
|
||||
<ButtonSkeleton size={2} />
|
||||
<ButtonSkeleton size={3} />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
58
packages/ui/src/v2/Button/Button.tsx
Normal file
58
packages/ui/src/v2/Button/Button.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
// Copyright (c) 2026 Probo Inc <hello@probo.com>.
|
||||
//
|
||||
// Permission to use, copy, modify, and/or distribute this software for any
|
||||
// purpose with or without fee is hereby granted, provided that the above
|
||||
// copyright notice and this permission notice appear in all copies.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
// PERFORMANCE OF THIS SOFTWARE.
|
||||
|
||||
import { SpinnerGapIcon } from "@phosphor-icons/react";
|
||||
import type { ComponentProps, ReactNode } from "react";
|
||||
import type { VariantProps } from "tailwind-variants/lite";
|
||||
|
||||
import { button } from "./variants";
|
||||
|
||||
export type ButtonProps
|
||||
= Omit<ComponentProps<"button">, "color">
|
||||
& VariantProps<typeof button>
|
||||
& {
|
||||
iconStart?: ReactNode;
|
||||
iconEnd?: ReactNode;
|
||||
// Shows a spinner in place of the leading icon and disables the button.
|
||||
loading?: boolean;
|
||||
};
|
||||
|
||||
// Clickable action (Radix "Button"). Renders a <button>; a styled <a> (Anchor)
|
||||
// or router link (Link) are separate components. See contrib/claude/ui.md.
|
||||
export function Button(props: ButtonProps) {
|
||||
const {
|
||||
size, variant, color, highContrast, className,
|
||||
iconStart, iconEnd, loading = false, disabled, type = "button", children, ...rest
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
disabled={disabled || loading}
|
||||
aria-busy={loading || undefined}
|
||||
className={button({ size, variant, color, highContrast, className })}
|
||||
{...rest}
|
||||
>
|
||||
{loading
|
||||
? <SpinnerGapIcon className="animate-spin" aria-hidden />
|
||||
: (
|
||||
<>
|
||||
{iconStart}
|
||||
{children}
|
||||
{iconEnd}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
28
packages/ui/src/v2/Button/ButtonSkeleton.tsx
Normal file
28
packages/ui/src/v2/Button/ButtonSkeleton.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// Copyright (c) 2026 Probo Inc <hello@probo.com>.
|
||||
//
|
||||
// Permission to use, copy, modify, and/or distribute this software for any
|
||||
// purpose with or without fee is hereby granted, provided that the above
|
||||
// copyright notice and this permission notice appear in all copies.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
// PERFORMANCE OF THIS SOFTWARE.
|
||||
|
||||
import type { ComponentProps } from "react";
|
||||
import type { VariantProps } from "tailwind-variants/lite";
|
||||
|
||||
import { buttonSkeleton } from "./variants";
|
||||
|
||||
export type ButtonSkeletonProps = Omit<ComponentProps<"span">, "children"> & VariantProps<typeof buttonSkeleton>;
|
||||
|
||||
// Loading placeholder paired with Button: a pulse block matching its size and
|
||||
// radius.
|
||||
export function ButtonSkeleton(props: ButtonSkeletonProps) {
|
||||
const { size, className, ...rest } = props;
|
||||
|
||||
return <span aria-hidden className={buttonSkeleton({ size, className })} {...rest} />;
|
||||
}
|
||||
136
packages/ui/src/v2/Button/variants.ts
Normal file
136
packages/ui/src/v2/Button/variants.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
// Copyright (c) 2026 Probo Inc <hello@probo.com>.
|
||||
//
|
||||
// Permission to use, copy, modify, and/or distribute this software for any
|
||||
// purpose with or without fee is hereby granted, provided that the above
|
||||
// copyright notice and this permission notice appear in all copies.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
// PERFORMANCE OF THIS SOFTWARE.
|
||||
|
||||
import { tv } from "tailwind-variants/lite";
|
||||
|
||||
// Button (Radix "Button"). A <button>; an Anchor / Link are separate
|
||||
// components (see contrib/claude/ui.md). The variant × color surface treatment
|
||||
// resolves in the compound variants below.
|
||||
export const button = tv({
|
||||
base: [
|
||||
"inline-flex shrink-0 items-center justify-center border border-transparent font-medium whitespace-nowrap",
|
||||
"cursor-pointer outline-none transition-colors select-none",
|
||||
"focus-visible:ring-2 focus-visible:ring-sand-8 focus-visible:ring-offset-1 focus-visible:ring-offset-sand-1",
|
||||
"disabled:pointer-events-none disabled:opacity-50",
|
||||
],
|
||||
variants: {
|
||||
// Corner radius is bound to size (per the Figma, radius is global/theme,
|
||||
// not a per-instance prop).
|
||||
size: {
|
||||
1: "h-6 gap-1 rounded-2 px-2 text-1 [&_svg]:size-4",
|
||||
2: "h-8 gap-2 rounded-2 px-3 text-2 [&_svg]:size-4",
|
||||
3: "h-10 gap-2 rounded-3 px-4 text-3 [&_svg]:size-5",
|
||||
4: "h-12 gap-2 rounded-3 px-5 text-4 [&_svg]:size-5",
|
||||
},
|
||||
variant: {
|
||||
classic: "",
|
||||
solid: "",
|
||||
soft: "",
|
||||
surface: "",
|
||||
outline: "",
|
||||
ghost: "",
|
||||
},
|
||||
color: {
|
||||
neutral: "",
|
||||
gold: "",
|
||||
red: "",
|
||||
green: "",
|
||||
amber: "",
|
||||
sky: "",
|
||||
},
|
||||
highContrast: {
|
||||
true: "",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
// ── solid: filled step-9 background, white text (dark for light hues) ──
|
||||
{ variant: ["solid", "classic"], color: "neutral", class: "bg-sand-9 text-white hover:bg-sand-10" },
|
||||
{ variant: ["solid", "classic"], color: "gold", class: "bg-gold-9 text-white hover:bg-gold-10" },
|
||||
{ variant: ["solid", "classic"], color: "red", class: "bg-red-9 text-white hover:bg-red-10" },
|
||||
{ variant: ["solid", "classic"], color: "green", class: "bg-green-9 text-white hover:bg-green-10" },
|
||||
{ variant: ["solid", "classic"], color: "amber", class: "bg-amber-9 text-amber-12 hover:bg-amber-10" },
|
||||
{ variant: ["solid", "classic"], color: "sky", class: "bg-sky-9 text-sky-12 hover:bg-sky-10" },
|
||||
// classic adds elevation over solid
|
||||
{ variant: "classic", class: "shadow-2" },
|
||||
// solid high-contrast: step-12 background, step-1 text
|
||||
{ variant: ["solid", "classic"], color: "neutral", highContrast: true, class: "bg-sand-12 text-sand-1 hover:bg-sand-12" },
|
||||
{ variant: ["solid", "classic"], color: "gold", highContrast: true, class: "bg-gold-12 text-gold-1 hover:bg-gold-12" },
|
||||
{ variant: ["solid", "classic"], color: "red", highContrast: true, class: "bg-red-12 text-red-1 hover:bg-red-12" },
|
||||
{ variant: ["solid", "classic"], color: "green", highContrast: true, class: "bg-green-12 text-green-1 hover:bg-green-12" },
|
||||
{ variant: ["solid", "classic"], color: "amber", highContrast: true, class: "bg-amber-12 text-amber-1 hover:bg-amber-12" },
|
||||
{ variant: ["solid", "classic"], color: "sky", highContrast: true, class: "bg-sky-12 text-sky-1 hover:bg-sky-12" },
|
||||
|
||||
// ── soft: tinted step-3 background, step-11 text ──
|
||||
{ variant: "soft", color: "neutral", class: "bg-sand-3 text-sand-11 hover:bg-sand-4" },
|
||||
{ variant: "soft", color: "gold", class: "bg-gold-3 text-gold-11 hover:bg-gold-4" },
|
||||
{ variant: "soft", color: "red", class: "bg-red-3 text-red-11 hover:bg-red-4" },
|
||||
{ variant: "soft", color: "green", class: "bg-green-3 text-green-11 hover:bg-green-4" },
|
||||
{ variant: "soft", color: "amber", class: "bg-amber-3 text-amber-11 hover:bg-amber-4" },
|
||||
{ variant: "soft", color: "sky", class: "bg-sky-3 text-sky-11 hover:bg-sky-4" },
|
||||
|
||||
// ── surface: subtle background + border ──
|
||||
{ variant: "surface", color: "neutral", class: "bg-sand-2 text-sand-11 border-sand-6 hover:bg-sand-3" },
|
||||
{ variant: "surface", color: "gold", class: "bg-gold-2 text-gold-11 border-gold-6 hover:bg-gold-3" },
|
||||
{ variant: "surface", color: "red", class: "bg-red-2 text-red-11 border-red-6 hover:bg-red-3" },
|
||||
{ variant: "surface", color: "green", class: "bg-green-2 text-green-11 border-green-6 hover:bg-green-3" },
|
||||
{ variant: "surface", color: "amber", class: "bg-amber-2 text-amber-11 border-amber-6 hover:bg-amber-3" },
|
||||
{ variant: "surface", color: "sky", class: "bg-sky-2 text-sky-11 border-sky-6 hover:bg-sky-3" },
|
||||
|
||||
// ── outline: transparent background, step-7 border ──
|
||||
{ variant: "outline", color: "neutral", class: "text-sand-11 border-sand-7 hover:bg-sand-3" },
|
||||
{ variant: "outline", color: "gold", class: "text-gold-11 border-gold-7 hover:bg-gold-3" },
|
||||
{ variant: "outline", color: "red", class: "text-red-11 border-red-7 hover:bg-red-3" },
|
||||
{ variant: "outline", color: "green", class: "text-green-11 border-green-7 hover:bg-green-3" },
|
||||
{ variant: "outline", color: "amber", class: "text-amber-11 border-amber-7 hover:bg-amber-3" },
|
||||
{ variant: "outline", color: "sky", class: "text-sky-11 border-sky-7 hover:bg-sky-3" },
|
||||
|
||||
// ── ghost: transparent until hover ──
|
||||
{ variant: "ghost", color: "neutral", class: "text-sand-11 hover:bg-sand-3" },
|
||||
{ variant: "ghost", color: "gold", class: "text-gold-11 hover:bg-gold-3" },
|
||||
{ variant: "ghost", color: "red", class: "text-red-11 hover:bg-red-3" },
|
||||
{ variant: "ghost", color: "green", class: "text-green-11 hover:bg-green-3" },
|
||||
{ variant: "ghost", color: "amber", class: "text-amber-11 hover:bg-amber-3" },
|
||||
{ variant: "ghost", color: "sky", class: "text-sky-11 hover:bg-sky-3" },
|
||||
|
||||
// ── high-contrast text bump for the tinted variants ──
|
||||
{ variant: ["soft", "surface", "outline", "ghost"], color: "neutral", highContrast: true, class: "text-sand-12" },
|
||||
{ variant: ["soft", "surface", "outline", "ghost"], color: "gold", highContrast: true, class: "text-gold-12" },
|
||||
{ variant: ["soft", "surface", "outline", "ghost"], color: "red", highContrast: true, class: "text-red-12" },
|
||||
{ variant: ["soft", "surface", "outline", "ghost"], color: "green", highContrast: true, class: "text-green-12" },
|
||||
{ variant: ["soft", "surface", "outline", "ghost"], color: "amber", highContrast: true, class: "text-amber-12" },
|
||||
{ variant: ["soft", "surface", "outline", "ghost"], color: "sky", highContrast: true, class: "text-sky-12" },
|
||||
],
|
||||
defaultVariants: {
|
||||
size: 2,
|
||||
variant: "solid",
|
||||
color: "gold",
|
||||
highContrast: false,
|
||||
},
|
||||
});
|
||||
|
||||
export const buttonSkeleton = tv({
|
||||
base: "inline-block shrink-0 animate-pulse bg-sand-3 align-middle",
|
||||
variants: {
|
||||
size: {
|
||||
1: "h-6 w-20 rounded-2",
|
||||
2: "h-8 w-24 rounded-2",
|
||||
3: "h-10 w-28 rounded-3",
|
||||
4: "h-12 w-32 rounded-3",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: 2,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user