HandleIcon

import { HandleIcon } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
size	number | "small" | "smallest" | "medium" | "large"	—
color	"inherit" | "disabled" | "error" | "warning" | "success" | "primary" | "secondary"	—
className	string	—
onClick	(e: React.SyntheticEvent) => void	—
style	React.CSSProperties	—

Example

This is the example the design-system sync renders and verifies for this component.

import { HandleIcon, Typography } from "@rebasepro/ui";

// The DS's own drag-handle icon. Takes IconProps like GitHubIcon does:
// `size` is a number or an iconSize keyword, plus color/className/style/onClick.
const SIZES = ["smallest", "small", "medium", "large"] as const;

export function Sizes() {
    return (
        <div className="flex items-end gap-4 p-4">
            {SIZES.map(size => (
                <div key={size} className="flex flex-col items-center gap-1">
                    <HandleIcon size={size}/>
                    <Typography variant="caption" color="secondary" className="font-mono">{size}</Typography>
                </div>
            ))}
            <div className="flex flex-col items-center gap-1">
                <HandleIcon size={40}/>
                <Typography variant="caption" color="secondary" className="font-mono">40</Typography>
            </div>
        </div>
    );
}