Function HeaderButton

frontend/src/components/shared/header-button.tsx:18–41

({
    'aria-label': ariaLabel,
    className,
    endIcon,
    icon,
    label,
    size = 'sm',
    ...props
}: HeaderButtonProps)

// auto-derived from `label` when it's a plain string so the icon-only mobile
// state stays accessible without the caller having to remember it.
export function HeaderButton({
    'aria-label': ariaLabel,
    className,
    endIcon,
    icon,
    label,
    size = 'sm',
    ...props
}: HeaderButtonProps) {
    const accessibleLabel = ariaLabel ?? (typeof label === 'string' ? label : undefined);

    return (
        <Button
            aria-label={accessibleLabel}
            className={cn('w-8 px-0 md:w-auto md:px-3', className)}
            size={size}
            {...props}
        >
            {icon}
            <span className="hidden md:inline">{label}</span>
            {endIcon ? <span className="hidden md:inline-flex">{endIcon}</span> : null}
        </Button>
    );
}