Add v2 IconButton component
Implement the IconButton component from the Probo Radix UI Figma: a square, icon-only <button> sharing Button's size 1-4 and variant/color/highContrast matrix, with a loading spinner state. The single icon is passed as children; callers provide an aria-label. Corner radius is bound to size. Includes a paired IconButtonSkeleton. Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
112
packages/ui/src/v2/IconButton/IconButton.stories.tsx
Normal file
112
packages/ui/src/v2/IconButton/IconButton.stories.tsx
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
// 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 { GearIcon } from "@phosphor-icons/react";
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
|
||||||
|
import { IconButton } from "./IconButton";
|
||||||
|
import { IconButtonSkeleton } from "./IconButtonSkeleton";
|
||||||
|
|
||||||
|
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/IconButton",
|
||||||
|
component: IconButton,
|
||||||
|
args: {
|
||||||
|
"aria-label": "Settings",
|
||||||
|
"children": <GearIcon />,
|
||||||
|
"size": 2,
|
||||||
|
"variant": "solid",
|
||||||
|
"color": "gold",
|
||||||
|
"highContrast": false,
|
||||||
|
"loading": false,
|
||||||
|
"disabled": false,
|
||||||
|
},
|
||||||
|
} satisfies Meta<typeof IconButton>;
|
||||||
|
|
||||||
|
type Story = StoryObj<typeof IconButton>;
|
||||||
|
|
||||||
|
export const Playground: Story = {};
|
||||||
|
|
||||||
|
export const Sizes: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{sizes.map(size => (
|
||||||
|
<IconButton key={size} size={size} aria-label="Settings">
|
||||||
|
<GearIcon />
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Variants: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{variants.map(variant => (
|
||||||
|
<IconButton key={variant} variant={variant} aria-label="Settings">
|
||||||
|
<GearIcon />
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</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 => (
|
||||||
|
<IconButton key={color} variant={variant} color={color} aria-label="Settings">
|
||||||
|
<GearIcon />
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const HighContrast: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{colors.map(color => (
|
||||||
|
<IconButton key={color} color={color} highContrast aria-label="Settings">
|
||||||
|
<GearIcon />
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const States: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<IconButton loading aria-label="Loading"><GearIcon /></IconButton>
|
||||||
|
<IconButton disabled aria-label="Settings"><GearIcon /></IconButton>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Skeleton: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<IconButtonSkeleton size={2} />
|
||||||
|
<IconButtonSkeleton size={3} />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
};
|
||||||
48
packages/ui/src/v2/IconButton/IconButton.tsx
Normal file
48
packages/ui/src/v2/IconButton/IconButton.tsx
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
// 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 } from "react";
|
||||||
|
import type { VariantProps } from "tailwind-variants/lite";
|
||||||
|
|
||||||
|
import { iconButton } from "./variants";
|
||||||
|
|
||||||
|
export type IconButtonProps
|
||||||
|
= Omit<ComponentProps<"button">, "color">
|
||||||
|
& VariantProps<typeof iconButton>
|
||||||
|
& {
|
||||||
|
// Shows a spinner in place of the icon and disables the button.
|
||||||
|
loading?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Square, icon-only action (Radix "IconButton"). The single icon is passed as
|
||||||
|
// children; always provide an `aria-label`. See contrib/claude/ui.md.
|
||||||
|
export function IconButton(props: IconButtonProps) {
|
||||||
|
const {
|
||||||
|
size, variant, color, highContrast, className,
|
||||||
|
loading = false, disabled, type = "button", children, ...rest
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type={type}
|
||||||
|
disabled={disabled || loading}
|
||||||
|
aria-busy={loading || undefined}
|
||||||
|
className={iconButton({ size, variant, color, highContrast, className })}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{loading ? <SpinnerGapIcon className="animate-spin" aria-hidden /> : children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
28
packages/ui/src/v2/IconButton/IconButtonSkeleton.tsx
Normal file
28
packages/ui/src/v2/IconButton/IconButtonSkeleton.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 { iconButtonSkeleton } from "./variants";
|
||||||
|
|
||||||
|
export type IconButtonSkeletonProps = Omit<ComponentProps<"span">, "children"> & VariantProps<typeof iconButtonSkeleton>;
|
||||||
|
|
||||||
|
// Loading placeholder paired with IconButton: a square pulse block matching its
|
||||||
|
// size and radius.
|
||||||
|
export function IconButtonSkeleton(props: IconButtonSkeletonProps) {
|
||||||
|
const { size, className, ...rest } = props;
|
||||||
|
|
||||||
|
return <span aria-hidden className={iconButtonSkeleton({ size, className })} {...rest} />;
|
||||||
|
}
|
||||||
134
packages/ui/src/v2/IconButton/variants.ts
Normal file
134
packages/ui/src/v2/IconButton/variants.ts
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
// 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";
|
||||||
|
|
||||||
|
// Square, icon-only sibling of Button (Radix "IconButton"). The variant × color
|
||||||
|
// surface treatment mirrors Button's matrix; only the sizing differs (square,
|
||||||
|
// no text padding).
|
||||||
|
export const iconButton = tv({
|
||||||
|
base: [
|
||||||
|
"inline-flex shrink-0 items-center justify-center border border-transparent",
|
||||||
|
"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: "size-6 rounded-2 [&_svg]:size-4",
|
||||||
|
2: "size-8 rounded-2 [&_svg]:size-4",
|
||||||
|
3: "size-10 rounded-3 [&_svg]:size-5",
|
||||||
|
4: "size-12 rounded-3 [&_svg]:size-5",
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
classic: "",
|
||||||
|
solid: "",
|
||||||
|
soft: "",
|
||||||
|
surface: "",
|
||||||
|
outline: "",
|
||||||
|
ghost: "",
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
neutral: "",
|
||||||
|
gold: "",
|
||||||
|
red: "",
|
||||||
|
green: "",
|
||||||
|
amber: "",
|
||||||
|
sky: "",
|
||||||
|
},
|
||||||
|
highContrast: {
|
||||||
|
true: "",
|
||||||
|
false: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
compoundVariants: [
|
||||||
|
// solid / classic
|
||||||
|
{ 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" },
|
||||||
|
{ variant: "classic", class: "shadow-2" },
|
||||||
|
{ 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
|
||||||
|
{ 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
|
||||||
|
{ 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
|
||||||
|
{ 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
|
||||||
|
{ 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 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 iconButtonSkeleton = tv({
|
||||||
|
base: "inline-block shrink-0 animate-pulse bg-sand-3 align-middle",
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
1: "size-6 rounded-2",
|
||||||
|
2: "size-8 rounded-2",
|
||||||
|
3: "size-10 rounded-3",
|
||||||
|
4: "size-12 rounded-3",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
size: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user