ui/buttons: add support for low profile style

This commit is contained in:
Adorian Doran 2026-02-16 18:15:29 +02:00
parent ea25477e3d
commit d64f2c72b7

View File

@ -18,7 +18,7 @@ export interface ButtonProps {
keyboardShortcut?: string;
/** Called when the button is clicked. If not set, the button will submit the form (if any). */
onClick?: () => void;
primary?: boolean;
kind?: "primary" | "secondary" | "lowProfile";
disabled?: boolean;
size?: "normal" | "small" | "micro";
style?: CSSProperties;
@ -26,15 +26,23 @@ export interface ButtonProps {
title?: string;
}
const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, kind, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
// Memoize classes array to prevent recreation
const classes = useMemo(() => {
const classList: string[] = ["btn"];
if (primary) {
classList.push("btn-primary");
} else {
classList.push("btn-secondary");
switch(kind) {
case "primary":
classList.push("btn-primary");
break;
case "lowProfile":
classList.push("tn-low-profile");
break;
default:
classList.push("btn-secondary");
break;
}
if (className) {
classList.push(className);
}
@ -44,7 +52,7 @@ const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortc
classList.push("btn-micro");
}
return classList.join(" ");
}, [primary, className, size]);
}, [kind, className, size]);
// Memoize keyboard shortcut rendering
const shortcutElements = useMemo(() => {